span.anylink-title {
  white-space: break-spaces;
  word-wrap: break-word;
  display: inline-block;
  font-family: "Droid Sans Mono", monospace;
  background-color: rgba(0, 0, 0, .075);
  border: 1px solid rgba(0, 0, 0, .05);
  padding: 0px 4px;
  margin: 1px;
  font-size: 100%;
  border-radius: 4px;
  text-align: left;
  line-height: normal
}

sup.anylink-ref {
  /* font-weight: bold; */
  font-style: italic;
}

.anylink-on-top {
    z-index: 2 !important;
    position: relative !important;
}


/*  Hidden unselectable whitespace */

span.anylink-hiddenws {
  font-size: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* Button-like hover effect for SVGs */
.anylink-svg {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  position: relative; /* added for tooltip positioning */
}


/* Tooltip on the anchor (applies to the anylink anchor that wraps the image) */
.anylink-on-top.anylink-ref {
  /* anchor is already set to position: relative elsewhere, but ensure it here too */
  position: relative;
  /* keep the z-index so the tooltip appears above other content */
  z-index: 2;
}

/* Tooltip pseudo-element placed on the anchor (works because anchors are not replaced elements) */
/* Do not show tooltip for elements that have the sd-btn class */
.anylink-on-top.anylink-ref:not(.sd-btn)::after {
  content: "Open in AnyBody";
  position: absolute;
  left: 40%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) scale(.95);
  background: rgba(0,0,0,.8);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity .2s ease, transform .2s ease;
}

/* show tooltip on hover or keyboard focus for accessibility */
/* Exclude .sd-btn so hover/focus won't trigger the tooltip */
.anylink-on-top.anylink-ref:not(.sd-btn):hover::after,
.anylink-on-top.anylink-ref:not(.sd-btn):focus::after,
.anylink-on-top.anylink-ref:not(.sd-btn):focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* keep image hover/active effects */
.anylink-svg:hover {
  transform: scale(1.12);
  cursor: pointer;
}

.anylink-svg:active {
  transform: scale(0.96);
  box-shadow: 0 2px 8px rgba(0,0,0,0) inset;
  filter: brightness(1);
}