:root {
    --color-bg: #282828; /* Gruvbox dark hard background */
    --color-fg: #ebdbb2; /* Gruvbox foreground */
    --color-link: #83a598; /* Gruvbox aqua */
    --color-link-visited: #d3869b; /* Gruvbox purple */
    --color-link-hover: #fe8019; /* Gruvbox orange */
    --color-red: #cc241d; /* Gruvbox red for starred links */
}

html, body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: "Fira Code", monospace; /* Added monospace for better code-like feel */
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scrolling */
  overflow-y: auto; /* Allow vertical scrolling */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

.container {
  display: grid;
  /* Increased min and max width for the left column to make the GIF larger */
  grid-template-columns: 1fr minmax(450px, 600px) minmax(700px, 1fr) 1fr;
  grid-template-areas:
    ". left right .";
  column-gap: 40px;
  justify-items: center;
  align-items: flex-start; /* Changed to flex-start to allow content to push down */
  min-height: 100%;
  width: 100%;
}

.left-container {
  grid-area: left;
  aspect-ratio: 1/1;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Added for positioning the settings button */
}

.right-container {
  grid-area: right;
  height: auto; /* Changed to auto to allow it to grow with content */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center all children horizontally */
  justify-content: flex-start; /* Changed to flex-start to align content to the top */
  padding-right: 0px; /* Removed as items are centered */
}

.datetime-container {
    font-size: 1.47em; /* Increased slightly for better visibility */
    color: var(--color-link-hover); /* Changed color to match the edit button string/title */
    margin-top: 20px; /* Added margin-top to push it down */
    margin-bottom: 20px; /* Space between clock and cd ~/_ */
    text-align: center; /* Center text within its own container */
    width: 100%; /* Take full width to allow centering */
    box-sizing: border-box;
}

.gif img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  margin-top: 80px; /* Adjusted to pull the image slightly up from 100px */
}

.head {
  display: flex; /* Use flexbox to keep elements inline */
  flex-direction: row; /* Arrange items in a row */
  align-items: center; /* Vertically align items in the center */
  font-size: 32px;
  padding-top: 0px;
  margin-top: 10px; /* Adjusted margin-top to maintain spacing */
  white-space: nowrap; /* Keep content on a single line */
}

/* Ensure prompt prefix and search text are inline elements */
#prompt-prefix, #search-text, #blinker {
    display: inline-block;
    vertical-align: middle; /* Align them nicely */
}

.bookmarks {
  display: grid; /* Changed to grid */
  grid-template-columns: repeat(4, 1fr); /* 4 columns for 2 equal rows */
  gap: 20px; /* Gap between categories */
  justify-content: center; /* Center categories horizontally */
  align-items: flex-start; /* Align category items to the top */
  width: 100%;
  box-sizing: border-box;
  margin-top: 40px; /* More space below cd ~/_ */
  /* Removed overflow-y and max-height to prevent internal scrolling */
  /* Hide scrollbar for Chrome, Safari and Opera within bookmarks */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera within bookmarks */
.bookmarks::-webkit-scrollbar {
  display: none;
}

.category {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* Allow categories to grow and shrink, with a flexible basis */
  min-width: 90px; /* Adjusted minimum width for categories */
  max-width: 160px; /* Adjusted maximum width for categories */
  text-align: center;
  box-sizing: border-box;
  padding: 10px; /* Added padding */
  border: 1px solid rgba(235, 219, 178, 0.2); /* Subtle border using Gruvbox fg with transparency */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow */
  background-color: rgba(40, 40, 40, 0.8); /* Slightly transparent Gruvbox dark hard background */
  position: relative; /* Needed for positioning the button */
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.title {
  font-size: 20px;
  margin-bottom: 5px;
}

li {
  font-size: 17px; /* Changed to 17px as requested */
  list-style-type: none;
  padding: 3px;
}

a:link {
  text-decoration: none;
  color: var(--color-link);
  transition: color 0.3s ease; /* Smooth transition for hover effect */
}

a.starred-link { /* New style for starred links */
    color: var(--color-red) !important; /* Added !important for a hard fix */
}

a:visited {
  color: var(--color-link); /* Changed to use the same color as a:link */
}

a:hover {
  color: var(--color-link-hover);
  text-shadow: 0 0 5px var(--color-link-hover); /* Subtle glow on hover */
}

.blinking {
  animation: opacity 1s ease-in-out infinite;
  opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Styles for the new link buttons */
.top-right-link-button {
    position: fixed; /* Position relative to the viewport */
    top: 15px; /* Distance from the top */
    width: 10px; /* Smaller size */
    height: 10px; /* Smaller size */
    border-radius: 50%; /* Makes it round */
    background-color: #a89984; /* Gruvbox grey background 20% dimmer */
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it's on top of everything */
    display: block; /* Make it a block element to apply width/height */
    text-decoration: none; /* Remove underline for the link */
}

.top-right-link-button:hover {
    background-color: #928374; /* Slightly darker on hover for the new color */
}

/* Specific positioning for each button */
.button-1 {
    right: 15px; /* Original button position */
}

.button-2 {
    right: 35px; /* 15px (original) + 10px (button width) + 10px (spacing) */
}

.button-3 {
    right: 55px; /* 35px (button 2) + 10px (button width) + 10px (spacing) */
}

/* New style for the top-left settings button */
.top-left-link-button {
    position: fixed; /* Position relative to the viewport */
    top: 15px; /* Distance from the top */
    left: 15px; /* Distance from the left */
    width: 10px; /* Smaller size */
    height: 10px; /* Smaller size */
    border-radius: 50%; /* Makes it round */
    background-color: #a89984; /* Gruvbox grey background 20% dimmer */
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it's on top of everything */
    display: block; /* Make it a block element to apply width/height */
    text-decoration: none; /* Remove underline for the link */
}

.top-left-link-button:hover {
    background-color: #928374; /* Slightly darker on hover for the new color */
}


/* Styles for the toggle links button */
.toggle-links-button {
    background: none;
    border: none;
    color: var(--color-link-hover); /* Use hover color for visibility */
    font-size: 1.5em; /* Make it noticeable */
    cursor: pointer;
    margin-top: 10px; /* Space from the last visible link */
    padding: 0;
    line-height: 1; /* Prevent extra space */
    transition: color 0.3s ease;
}

.toggle-links-button:hover {
    color: var(--color-fg); /* Brighter on hover */
}

/* Responsive adjustments for the bookmarks grid */
@media (max-width: 992px) { /* Adjusted breakpoint for 3 columns */
  .bookmarks {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
  }
}

@media (max-width: 768px) {
  .bookmarks {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    gap: 15px;
  }
  .category {
    padding: 8px;
  }
  .title {
    font-size: 1.3em;
  }
  li {
    font-size: 0.95em; /* Adjusted for smaller screens to match new size (17px / 18px base) */
    padding: 4px;
  }
}

@media (max-width: 480px) {
  .bookmarks {
    grid-template-columns: 1fr; /* Single column on very small screens */
    gap: 10px;
  }
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
}

.modal.show {
    display: flex; /* Show when 'show' class is added */
}

.modal-content {
    background-color: var(--color-bg);
    margin: auto;
    padding: 30px;
    border: 1px solid var(--color-link);
    width: 80%; /* Could be responsive */
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
    color: var(--color-fg);
    max-height: 90vh; /* Max height to allow scrolling within modal */
    overflow-y: auto; /* Enable scrolling for modal content */
}

.close-button {
    color: var(--color-fg);
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: var(--color-link-hover);
    text-decoration: none;
    cursor: pointer;
}

h2 {
    text-align: center;
    color: var(--color-link-hover);
    margin-bottom: 20px;
}

#modal-categories {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.modal-category-item {
    border: 1px solid rgba(235, 219, 178, 0.3);
    border-radius: 8px;
    padding: 15px;
    background-color: rgba(40, 40, 40, 0.9);
}

.modal-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.category-title-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid var(--color-link);
    border-radius: 5px;
    background-color: #3c3836; /* Gruvbox dark grey */
    color: var(--color-fg);
    font-family: "Fira Code", monospace;
    font-size: 1em;
    margin-right: 10px;
}

.modal-links-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-link-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.modal-link-item input[type="text"],
.modal-link-item input[type="url"] {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--color-link);
    border-radius: 5px;
    background-color: #3c3836; /* Gruvbox dark grey */
    color: var(--color-fg);
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
}

.modal-button,
.add-link-button,
.delete-button {
    background-color: var(--color-link-hover);
    color: var(--color-bg);
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.modal-button:hover,
.add-link-button:hover {
    background-color: #d65d0e; /* Darker orange */
}

.delete-button {
    background-color: #cc241d; /* Gruvbox red */
}

.delete-button:hover {
    background-color: #9d0006; /* Darker red */
}

#add-category-button,
#save-settings-button {
    width: fit-content;
    margin-top: 20px;
    align-self: center; /* Center these buttons */
}

/* Custom Confirmation Dialog */
.custom-confirm {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-bg);
    border: 1px solid var(--color-link-hover);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 1002; /* Above the modal */
    text-align: center;
}

.custom-confirm p {
    margin-bottom: 15px;
    font-size: 1.1em;
}

.custom-confirm button {
    background-color: var(--color-link);
    color: var(--color-bg);
    border: none;
    padding: 10px 20px;
    margin: 0 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Fira Code", monospace;
    transition: background-color 0.3s ease;
}

.custom-confirm button:hover {
    background-color: var(--color-link-hover);
}

/* Star button specific styles */
.star-button {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--color-fg); /* Default star color */
    padding: 0 5px;
    transition: color 0.2s ease;
}

.star-button.is-starred {
    color: var(--color-red) !important; /* Gruvbox red for starred */
}

.star-button:hover {
    color: var(--color-link-hover); /* Orange on hover */
}