/* Clean, arrowless tooltip — minimal, fresh */
:root {
  --tt-bg: rgba(18, 18, 22, 0.92);
  --tt-fg: #e9ecf3;
  --tt-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 2px 10px rgba(0,0,0,0.18);
  --tt-radius: 12px;
  --tt-pad: 8px 12px;
  --tt-size: 12.5px;

  /* subtle 1px hairline using inset */
  --tt-stroke: inset 0 0 0 1px rgba(255,255,255,0.06);
  /* soft top sheen */
  --tt-sheen: inset 0 6px 20px rgba(255,255,255,0.06);
  /* optional accent glow (set to transparent to disable) */
  --tt-glow: 0 0 0 0 rgba(99,102,241,0); /* indigo */
}

/* Light theme override if you use data-theme="light" */
html[data-theme="light"] {
  --tt-bg: rgba(252, 252, 255, 0.98);
  --tt-fg: #16181d;
  --tt-shadow: 0 12px 28px rgba(0,0,0,0.15), 0 2px 10px rgba(0,0,0,0.08);
  --tt-stroke: inset 0 0 0 1px rgba(0,0,0,0.08);
  --tt-sheen: inset 0 10px 24px rgba(0,0,0,0.03);
}

.custom-tooltip{
  position: fixed; z-index: 99999 !important;
  padding: 6px 8px; border-radius: 6px;
  background: rgba(24,24,27,.98); color: #fff;
  font: 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  max-width: min(300px, 90vw); word-wrap: break-word; pointer-events: none;
  opacity: 0; transform: scale(.98);
  transition: opacity .12s ease, transform .12s ease;
}
.custom-tooltip[data-show]{ opacity:1; transform:scale(1); }
.custom-tooltip::after{
  content:""; position:absolute; width:8px; height:8px; transform:rotate(45deg);
  background: inherit;
}
.custom-tooltip[data-placement="top"]::after    { left: var(--arrow-x,50%); bottom:-4px; }
.custom-tooltip[data-placement="bottom"]::after { left: var(--arrow-x,50%); top:-4px; }
.custom-tooltip[data-placement="left"]::after   { top:  var(--arrow-y,50%); right:-4px; }
.custom-tooltip[data-placement="right"]::after  { top:  var(--arrow-y,50%); left:-4px; }

/* Show state */
.custom-tooltip.show {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 0px)) scale(1.0);
}

/* Place below (no arrow needed) */
.custom-tooltip.bottom {
  transform-origin: top center;
  transform: translate(-50%, 12px);
}
.custom-tooltip.bottom.show {
  transform: translate(-50%, 14px);
}

/* Optional: allow wrapping variant */
.custom-tooltip.wrap {
  white-space: normal;
  word-break: break-word;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .custom-tooltip { transition: none; }
}