/* Styling for the "Copied!" tooltip */
.permalink-tooltip {
  /* Position and visibility */
  position: fixed;
  z-index: 1000;
  opacity: 0;
  
  /* --- FIX ---
     The transform moves the tooltip 50% of its own width to the left,
     and 100% of its own height + 5px upwards. This perfectly centers it
     above the target element, regardless of the tooltip's text length.
  */
  transform: translate(-50%, -100%) translateY(-5px);
  transition: opacity 0.2s ease-in-out;

  /* Appearance */
  background-color: var(--md-code-bg-color); /* Use theme's code background color */
  color: var(--md-default-fg-color); /* Use theme's text color */
  padding: 0.3em 0.7em;
  border-radius: 4px;
  font-size: 0.8rem;
  pointer-events: none; /* Prevent tooltip from being interactive */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  white-space: nowrap; /* Prevent text from wrapping */
}

/* Make the tooltip visible */
.permalink-tooltip.visible {
  opacity: 1;
}