/* MitsuHub global tooltip — dark pill with directional arrow. */
.mh-tooltip {
    position: fixed;
    padding: 6px 12px;
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(var(--glass-blur-sm));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: rgba(var(--fg-rgb, 255, 255, 255), 0.9);
    font-size: 0.75rem;
    font-weight: var(--weight-medium);
    font-family: 'Poppins', sans-serif;
    pointer-events: none;
    z-index: var(--z-tooltip);
    opacity: 0;
    transition: opacity var(--transition-fast);
    /* Wrap long content within max-width instead of overflowing the pill.
       Short tooltips still render on one line (the box shrinks to content);
       long titles wrap to multiple lines. overflow-wrap/word-break handle
       very long unbroken strings. */
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
    line-height: var(--leading-base);
    box-shadow: var(--shadow-md);
    max-width: 280px;
}

/* Respect prefers-reduced-motion — JS toggles .no-motion on the element. */
.mh-tooltip.no-motion {
    transition: none;
}

.mh-tooltip.visible {
    opacity: 1;
}

/* ---- Directional arrows ---- */
/* Above: arrow points DOWN to the trigger */
.mh-tooltip.above::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(15, 15, 20, 0.95);
}

/* Below: arrow points UP at the trigger */
.mh-tooltip.below::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(15, 15, 20, 0.95);
}

/* Left: arrow points RIGHT at the trigger */
.mh-tooltip.left::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(15, 15, 20, 0.95);
}

/* Right: arrow points LEFT at the trigger */
.mh-tooltip.right::after {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: rgba(15, 15, 20, 0.95);
}