/* ===================================================================
   Tooltip — Lightweight ephemeral guidance
   Token-driven via ComponentTokenResolver → CSS custom properties.
   =================================================================== */

/* --- Trigger wrapper (inline, no layout impact) --- */

.ui-tooltip-trigger {
    display: inline-flex;
    position: relative;
}

/* --- Portal container (positioned by JS) --- */

.ui-tooltip-portal {
    /* Start fixed + hidden so the element never enters document flow
       or paints at the component position before JS mounts to the portal. */
    position: fixed;
    visibility: hidden;
    pointer-events: none;
}

/* --- Tooltip bubble --- */

.ui-tooltip {
    background: var(--tooltip-background, var(--meb-surface-tooltip));
    color: var(--tooltip-foreground, var(--meb-text-tooltip));
    border: 1px solid var(--tooltip-border, var(--meb-border-tooltip));
    box-shadow: var(--tooltip-shadow, var(--meb-shadow-tooltip));
    padding: 6px 10px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    line-height: var(--font-lineheight-body);
    border-radius: 4px;
    white-space: nowrap;
    max-width: 280px;
    overflow-wrap: break-word;

    /* Tooltip must NEVER block interaction */
    pointer-events: none;

    /* Animation — starts hidden */
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 100ms ease, transform 100ms ease;
}

/* --- Enter animation — wrapper gains "visible" class --- */

.ui-tooltip-wrapper.visible .ui-tooltip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* --- Reduced motion --- */

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

    .ui-tooltip-wrapper.visible .ui-tooltip {
        transform: none;
    }
}