/* Portal tooltips (static/js/portal-tips.js): the look of AI Chat's former custom tooltip, with the portal's code
   colors (light and dark). Above every
   popover, sheet, dialog and toast, and never in the way of the pointer. */
.portal-tip {
    position: fixed; z-index: var(--z-tip); pointer-events: none;
    left: 0; top: 0;
    background: var(--clr-tip-bg); color: var(--clr-tip-ink);
    font-size: 0.72rem; font-weight: var(--fw-medium); line-height: 1.4; text-align: left;
    padding: 6px 10px; border-radius: 7px;
    /* Never wider than the viewport, and a long unbroken name wraps inside the box instead of running past it. */
    max-width: min(340px, calc(100vw - 16px));
    overflow-wrap: anywhere; word-break: break-word; box-sizing: border-box;
    white-space: pre-line;   /* titles joined with line breaks keep them, as native titles did */
    box-shadow: var(--shadow-tip);
    /* Hidden (not only transparent) when no tip shows, so the last text leaves the accessibility tree; the
       visibility switch waits for the fade-out. visibility keeps layout, so the tip is still measured. */
    opacity: 0; transform: translateY(3px); visibility: hidden;
    transition: opacity 0.13s ease, transform 0.13s ease, visibility 0s linear 0.13s;
}
.portal-tip.below { transform: translateY(-3px); }
.portal-tip.right { transform: translateX(-3px); }
.portal-tip.visible { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.portal-tip::after {
    content: ""; position: absolute; top: 100%;
    left: var(--tip-arrow-x, 50%); transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--clr-tip-bg);
}
.portal-tip.below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: var(--clr-tip-bg);
}
.portal-tip.right::after {
    top: var(--tip-arrow-y, 50%); bottom: auto; left: auto; right: 100%; transform: translateY(-50%);
    border-top-color: transparent; border-right-color: var(--clr-tip-bg);
}
@media (prefers-reduced-motion: reduce) {
    .portal-tip, .portal-tip.below, .portal-tip.right { transform: none; transition: opacity 0.13s ease, visibility 0s linear 0.13s; }
    .portal-tip.visible, .portal-tip.below.visible, .portal-tip.right.visible { transition-delay: 0s; }
}
@media print {
    .portal-tip { display: none !important; }
}