/* Styled tooltips — the bubble drawn by /js/tooltips.js.
 *
 * Its own file rather than a section of style.css: style.css is deliberately
 * theme-agnostic (it carries no [data-theme] blocks at all, being shared with
 * the light-only marketing pages), and this component needs a dark variant.
 * Every page that loads tooltips.js loads this beside it.
 *
 * Shaped after Bootstrap's tooltip — dark bubble, small caret, short fade —
 * but built from Opteryx tokens rather than pulling in Bootstrap and Popper
 * for one component.
 */

.tooltip {
    position: fixed;
    top: 0;
    left: 0;
    /* Above the app's own layers (menus at 1000, the drawer at 300) and below
       #app-loading at 9999, which is meant to cover everything. */
    z-index: 9000;
    max-width: 260px;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 150ms ease,
        visibility 0s linear 150ms;
    /* The bubble must never eat the hover it is describing, nor the click
       that was heading for the button underneath it. */
    pointer-events: none;
}
.tooltip--shown {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 150ms ease,
        visibility 0s;
}

.tooltip__inner {
    padding: 5px 9px;
    border-radius: var(--r-m); /* 6px — same as .icon-btn / inputs */
    background: var(--opteryx-navy);
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    /* Tooltips carry sentences ("Editor query attached — the assistant can
       see the SQL in your editor"), so wrap rather than ellipsize, and keep
       hard-wrapped text (a shortcut cap, a dataset name) from splitting. */
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 4px 12px rgba(31, 46, 97, 0.24);
}

.tooltip__arrow {
    position: absolute;
    /* left is set per-target by place(), so the caret points at the control
       even when the bubble is pushed sideways by the viewport edge. */
    width: 0;
    height: 0;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
/* Default placement is above the target, so the caret hangs off the bottom. */
.tooltip__arrow {
    bottom: -5px;
    border-top: 5px solid var(--opteryx-navy);
}
.tooltip--below .tooltip__arrow {
    bottom: auto;
    top: -5px;
    border-top: 0;
    border-bottom: 5px solid var(--opteryx-navy);
}

/* On the near-black IDE surface a navy bubble disappears into the background,
   so lift it to a slate that reads as an elevated surface — the same move the
   app's other dark-mode overlays make. */
[data-theme="dark"] .tooltip__inner {
    background: #2a3a4d;
    color: #f2f6fb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .tooltip__arrow {
    border-top-color: #2a3a4d;
}
[data-theme="dark"] .tooltip--below .tooltip__arrow {
    border-top-color: transparent;
    border-bottom-color: #2a3a4d;
}

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