/* Hide the PDF.js text‐layer glyphs so the canvas text shows through */
.textLayer > span {
  color: transparent !important;
  position: absolute;
  white-space: pre;
  /* In case of any fallback, force uniform metrics */
  font: inherit !important;
}

/* Wrap only the highlighted spans */
.textLayer .highlight {
  position: relative;
  display: inline-block;
}

/* Paint a translucent sky blue under the text shape */
.textLayer .highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(135, 206, 235, 0.25);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 0.25em;
  /* slight z-index so it sits just above the canvas */
  z-index: -1;
  
  /* Add a slight padding reduction to make the highlight less expansive */
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
}

/* Optional: smooth fade-in of new highlights */
@keyframes highlightFade {
  from { background-color: rgba(135, 206, 235, 0); }
  to   { background-color: rgba(135, 206, 235, 0.25); }
}
.textLayer .highlight::before {
  animation: highlightFade 0.3s ease-out;
}

/* Style for the currently scrolled-to highlight */
.persistent-highlight.active-scrolled-highlight {
  outline: 2px solid #FFD700; /* Gold outline */
  box-shadow: 0 0 10px 3px #FFB000; /* Amber/Gold glow */
  background-color: rgba(255, 215, 0, 0.3) !important; /* Slightly more prominent background */
  /* Ensure it's visually on top if there are stacking issues, though mix-blend-mode might handle it */
  z-index: 1 !important; 
  transition: outline 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
