/* Full-screen invisible layer above everything */
#tooltipPortal {
  position: fixed;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;      /* don't block clicks */
  z-index: 2147483647;       /* max 32-bit int, hilariously high */
}

/* The actual bubble */
#tooltipBubble {
  position: absolute;
  max-width: 600px;
  min-width: 240px;
  padding: 6px 8px;
  background: #111;
  color: #fff;
  font-size: 0.8rem;
  border-radius: 4px;
  white-space: normal;
  word-wrap: break-word;

  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
  pointer-events: none;      /* just visual */
}



#recentActionList {
  position: absolute;
  top: 50px;     /* adjust padding from top */
  right: 10px;    /* adjust padding from left */
  
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Inter, Arial;
  font-size: 13px;
  overflow: visible;
  pointer-events: auto; 
  z-index: 99999999;
}

.recentAction {
  list-style: none;
  pointer-events: auto;
  width: fit-content;
  margin-left: auto;
  padding-left: 0;
  max-width: 25vw;

  text-align: right;
  position: relative;       /* needed for tooltip */
  overflow: visible;        /* IMPORTANT: allow tooltip to escape */
}

/* inner text container that gets clipped */
.recentAction .text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  max-width: inherit;       /* same limit */
  display: inline-block;
  text-align: right;
}


.recentAction[data-tooltip] {
  overflow: visible;
  position: relative;
  text-align: left;
}



@media (max-width: 768px) {

  #recentActionList {
    font-size: 10px;
  }
}