:root {
  --mbts-tooltip-bg: rgba(15, 23, 42, 0.92);
  --mbts-tooltip-color: rgba(241, 245, 249, 0.94);
  --mbts-tooltip-border: rgba(148, 163, 184, 0.2);
  --mbts-tooltip-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
  --mbts-tooltip-radius: 6px;
  --mbts-tooltip-font-size: 12px;
  --mbts-tooltip-line-height: 1.3;
  --mbts-tooltip-max-width: 320px;
  --mbts-tooltip-gap: 10px;
  --mbts-tooltip-arrow-size: 5px;
  --mbts-tooltip-z-index: 999999;
  --mbts-tooltip-motion-duration: 0.16s;
}

.mbts-tooltip-portal {
  --mbts-tooltip-bg: rgba(15, 23, 42, 0.94);
  --mbts-tooltip-color: rgba(226, 232, 240, 0.94);
  --mbts-tooltip-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
  --mbts-tooltip-radius: 8px;
  --mbts-tooltip-line-height: 1.45;
  position: fixed;
  z-index: var(--mbts-tooltip-z-index);
  box-sizing: border-box;
  max-width: var(--mbts-tooltip-max-width);
  padding: 7px 10px;
  border: 1px solid var(--mbts-tooltip-border);
  border-radius: var(--mbts-tooltip-radius);
  background: var(--mbts-tooltip-bg);
  color: var(--mbts-tooltip-color);
  box-shadow: var(--mbts-tooltip-shadow);
  font-size: var(--mbts-tooltip-font-size);
  font-weight: 500;
  line-height: var(--mbts-tooltip-line-height);
  letter-spacing: 0;
  white-space: pre-line;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--mbts-tooltip-motion-duration) ease, transform var(--mbts-tooltip-motion-duration) ease;
}

.mbts-tooltip-portal[data-placement="bottom"] {
  transform: translateY(-4px);
}

.mbts-tooltip-portal::after {
  content: "";
  position: absolute;
  left: var(--mbts-tooltip-arrow-x, 50%);
  width: calc(var(--mbts-tooltip-arrow-size) * 2);
  height: calc(var(--mbts-tooltip-arrow-size) * 2);
  background: var(--mbts-tooltip-bg);
  pointer-events: none;
}

.mbts-tooltip-portal[data-placement="top"]::after {
  bottom: calc(var(--mbts-tooltip-arrow-size) * -1);
  border-right: 1px solid var(--mbts-tooltip-border);
  border-bottom: 1px solid var(--mbts-tooltip-border);
  transform: translateX(-50%) rotate(45deg);
}

.mbts-tooltip-portal[data-placement="bottom"]::after {
  top: calc(var(--mbts-tooltip-arrow-size) * -1);
  border-top: 1px solid var(--mbts-tooltip-border);
  border-left: 1px solid var(--mbts-tooltip-border);
  transform: translateX(-50%) rotate(45deg);
}

.mbts-tooltip-portal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mbts-tooltip-portal {
    transition: none;
  }
}