body {
  /* CSS Variables for Liquid Glass Effect */
  --glass-bg: rgba(255, 255, 255, 0.06); /* Very subtle white background */
  --glass-border: none; /* No border for text boxes */
  --glass-blur: 10px; /* Stronger blur for more prominent effect */
  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Softer, larger shadow */
  --glass-highlight: rgba(255, 255, 255, 0.03); /* For subtle gradients */
  --text-color: #f0f0f0; /* Brighter default text */
  --title-color: #c9e8ff; /* A slightly brighter, clearer blue for titles */

  font-family: "Lora", serif;
  background-color: rgb(32, 32, 32); /* Dark mode Chrome background */
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* Prevent scrollbars */
  color: var(--text-color);
  font-style: italic; /* Make all body text italic */
  font-weight: 400; /* Set font weight to regular */
  font-size: 16px; /* Set base font size to 16px */
}

#background-image-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-image is set via CSS variable on ::before */
  z-index: 0;
}

#background-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--image-url); /* Use CSS variable */
  background-size: cover; /* Ensure blurred background covers the entire area */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Ensures background stays fixed relative to viewport */
  filter: blur(10px) brightness(60%) contrast(110%); /* Apply blur and other filters here */
  transform: scale(1.1); /* Scale up to fix white border around blurred background */
  z-index: 0;
}

#sharp-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: var(--image-url); /* Use CSS variable */
  background-size: cover; /* Sharp image covers the entire area */
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Ensures background stays fixed relative to viewport */
  filter: brightness(100%) contrast(100%); /* Ensure sharpness */
  z-index: 1; /* Place above blurred background */
  opacity: 1; /* Always visible instantly */
  display: none; /* Hidden by default, shown by JS when it's an image */
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure video covers the entire area */
  z-index: 1; /* Same as sharp-image */
  display: none; /* Hidden by default, shown by JS when it's a video */
}

#bottom-controls-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px; /* Make it span the entire bottom width */
  display: grid;
  grid-template-columns: max-content max-content 1fr auto; /* Date, Mode, Gap, Title (auto width, respects max-width of item) */
  align-items: center;
  gap: 20px;
  z-index: 3;
}

#date-navigation-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--glass-bg), var(--glass-highlight));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(100%); /* Enhanced liquid glass effect */
  border: var(--glass-border);
  padding: 11.6px 15px;
  border-radius: 12px; /* Consistent border radius */
  color: var(--text-color);
  font-size: 16px;
  transition: all 0.2s ease-in-out; /* Smooth transition for hover */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for contrast */
}

#feed-selector-container {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Removed background, backdrop-filter, box-shadow - these will go on ::before */
  border: var(--glass-border); /* Keep border */
  border-radius: 12px;
  position: relative; /* Needed for absolute positioning of highlight */
  overflow: hidden; /* Ensures sliding highlight stays within bounds */
  /* Re-add the glass effect for the overall container appearance */
  background: linear-gradient(135deg, var(--glass-bg), var(--glass-highlight));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(100%);
  box-shadow: var(--glass-shadow);
  padding: 0; /* No padding on container itself, padding will be on buttons */
}

.feed-button {
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 16px; /* Matched font size to #date-navigation-container */
  padding: 11.6px 15px; /* Add padding to buttons themselves */
  border-radius: 8px; /* Keep button specific border-radius */
  cursor: pointer;
  transition: color 0.2s ease-in-out; /* Transition text color */
  flex: 1; /* Make each button take equal width */
  text-align: center; /* Center the text inside the button */
  position: relative; /* Needed for z-index */
  z-index: 1; /* Place above pseudo-element */
}

.feed-button:hover {
  /* Background handled by pseudo-element, only visual changes for hover */
  color: rgba(255, 255, 255, 0.8);
}

.feed-button.active {
  /* Background handled by pseudo-element */
  /* No direct background-color on active button */
}

#date-navigation-container .arrow {
  cursor: pointer;
  font-size: 16px; /* Match date font size for consistent height */
  padding: 0 5px;
  user-select: none; /* Prevent text selection on double click */
  transition: color 0.2s ease-in-out; /* Smooth transition for hover */
}

#date-navigation-container .arrow:hover {
  color: rgba(255, 255, 255, 0.8); /* Brighter, more neutral highlight */
}

.disabled-arrow {
  color: rgba(255, 255, 255, 0.3) !important; /* Muted color for disabled state */
  cursor: default !important; /* Indicate non-clickability */
  pointer-events: none; /* Ensure no click events */
}

#potd-title-wrapper {
  grid-column: 4; /* Explicitly place in the fourth column */
  text-align: right;
  /* margin-left: auto; removed as 1fr gap handles spacing */
  padding: 12.25px 15px;
  background: linear-gradient(135deg, var(--glass-bg), var(--glass-highlight));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(100%);
  border-radius: 12px;
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  max-width: calc(50vw - 20px); /* Limit width as per previous container */
  transition: all 0.2s ease-in-out;
}

#potd-title {
  margin-top: 0;
  margin-bottom: 0;
  color: var(--text-color); /* Use consistent text color */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Subtle shadow for contrast */
  font-size: 16px;
  font-weight: normal; /* Make title font weight consistent with date */
  line-height: 1.2; /* Explicit line height for consistent rendering */
  cursor: pointer; /* Indicate clickability */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 1.2em; /* Initial height to show one line */
  transition: max-height 0.5s ease-in-out; /* Smooth transition for max-height only */
}

#potd-title.expanded {
  white-space: normal; /* Allow text to wrap */
  overflow: visible; /* Show full content */
  text-overflow: clip; /* Remove ellipsis */
  max-height: 500px; /* Or a sufficiently large value to show full content */
}

#potd-title a {
  color: inherit; /* Inherit the color from #potd-title */
  text-decoration: none; /* Remove underline */
}

#potd-title a:hover {
  text-decoration: underline; /* Add underline on hover for discoverability */
}

/* Ensure no leading margin/padding on the first child element within potd-title */
#potd-title > *:first-child {
  margin-left: 0;
  padding-left: 0;
  margin-top: 0;
  padding-top: 0;
}




#settings {
  position: absolute; /* Position settings independently */
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--glass-bg), var(--glass-highlight));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(100%); /* Enhanced liquid glass effect */
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 10px;
  border-radius: 12px; /* Consistent border radius */
  z-index: 3; /* Ensure it's on top of everything */
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease-in-out; /* Smooth transition for hover */
}

#settings label {
  color: #e0e0e0; /* Use new body color */
}

#settings input[type="checkbox"] {
  margin-right: 5px;
}
/* Sliding highlight for feed-selector-container */
#feed-selector-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.2); /* Highlight color */
  /* border-radius will be applied dynamically by active classes */
  transition: left 0.3s ease-in-out, mask-image 0.3s ease-in-out, border-radius 0.3s ease-in-out; /* Add border-radius to transition */
  z-index: 0; /* Place behind buttons, inside container */
  /* Initial mask to avoid sharp edges on both sides by default (or when no specific active state is applied) */
  mask-image: linear-gradient(to right, transparent 10%, black 25%, black 75%, transparent 90%);
  -webkit-mask-image: linear-gradient(to right, transparent 10%, black 25%, black 75%, transparent 90%);
#wikipedia-button:focus,
#wikimedia-button:focus {
  outline: none;
}
}

#feed-selector-container.wikipedia-active::before {
  left: 0;
  border-radius: 12px 0 0 12px; /* Rounded on left, sharp on right */
  /* Fade out on the right side - increased fade area */
  mask-image: linear-gradient(to right, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
}

#feed-selector-container.wikimedia-active::before {
  left: 50%; /* Moves to the right half */
  border-radius: 0 12px 12px 0; /* Sharp on left, rounded on right */
  /* Fade out on the left side - increased fade area */
  mask-image: linear-gradient(to left, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent 100%);
}

@media (max-width: 768px) {
  #bottom-controls-container {
    grid-template-columns: 1fr; /* Stack items vertically */
    grid-template-areas:
      "title"
      "date"
      "mode";
  }

  #potd-title-wrapper {
    grid-area: title;
    text-align: center; /* Center align title on small screens */
    margin: 0 auto; /* Center the wrapper itself */
    max-width: 100%; /* Allow title to take full width */
  }

  #date-navigation-container {
    grid-area: date;
    margin: 0 auto; /* Center the date navigation */
  }

  #feed-selector-container {
    grid-area: mode;
    margin: 0 auto; /* Center the feed selector */
  }
}