/**
 * FruitLive custom tooltips — replaces native browser title tips.
 * Driven by js/fl-tooltips.js (data-fl-tip / migrated title / badge aria-label).
 */

.fl-tip {
    --fl-tip-bg: #0f172a;
    --fl-tip-fg: #f8fafc;
    --fl-tip-muted: #94a3b8;
    --fl-tip-radius: 10px;
    --fl-tip-pad-y: 0.45rem;
    --fl-tip-pad-x: 0.7rem;
    --fl-tip-arrow: 6px;

    position: fixed;
    z-index: 13050;
    top: 0;
    left: 0;
    max-width: min(280px, calc(100vw - 1.5rem));
    padding: var(--fl-tip-pad-y) var(--fl-tip-pad-x);
    border-radius: var(--fl-tip-radius);
    background: var(--fl-tip-bg);
    color: var(--fl-tip-fg);
    font-family: var(--fl-font-ui, "Montserrat", system-ui, sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 10px 28px rgba(15, 23, 42, 0.28);
    opacity: 0;
    transform: translate3d(-50%, calc(-100% - 10px), 0) scale(0.96);
    transition:
        opacity 0.14s ease,
        transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.fl-tip.is-visible {
    opacity: 1;
    transform: translate3d(-50%, calc(-100% - 10px), 0) scale(1);
}

.fl-tip.is-below {
    transform: translate3d(-50%, 10px, 0) scale(0.96);
}

.fl-tip.is-below.is-visible {
    transform: translate3d(-50%, 10px, 0) scale(1);
}

.fl-tip__title {
    display: block;
    font-weight: 600;
    color: #fff;
}

.fl-tip__sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--fl-tip-muted);
    letter-spacing: 0.02em;
}

/* Arrow */
.fl-tip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(-1 * var(--fl-tip-arrow) + 1px);
    width: 0;
    height: 0;
    margin-left: calc(-1 * var(--fl-tip-arrow));
    border: var(--fl-tip-arrow) solid transparent;
    border-top-color: var(--fl-tip-bg);
    border-bottom-width: 0;
}

.fl-tip.is-below::after {
    top: calc(-1 * var(--fl-tip-arrow) + 1px);
    bottom: auto;
    border-top-width: 0;
    border-bottom-width: var(--fl-tip-arrow);
    border-top-color: transparent;
    border-bottom-color: var(--fl-tip-bg);
}

/* Badge tips — slightly tighter, accent edge */
.fl-tip.is-badge {
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 3px 0 0 var(--phoenix-primary, #0077b6),
        0 12px 30px rgba(15, 23, 42, 0.32);
}

.fl-tip.is-badge .fl-tip__title {
    font-size: 0.78rem;
}

/* Light theme variant for dense light UIs (optional via data-fl-tip-theme="light") */
.fl-tip.is-light {
    --fl-tip-bg: #ffffff;
    --fl-tip-fg: #0f172a;
    --fl-tip-muted: #64748b;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 12px 28px rgba(15, 23, 42, 0.12);
}

.fl-tip.is-light .fl-tip__title {
    color: #0f172a;
}

.fl-tip.is-light.is-badge {
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.08),
        inset 3px 0 0 var(--phoenix-primary, #0077b6),
        0 12px 28px rgba(15, 23, 42, 0.12);
}

/* Hint cursor on tippable badges */
.bb-symbol[data-fl-tip],
.bb-symbol[title],
.bb-symbol[aria-label],
.lmb-card__badge[data-fl-tip],
.lmb-card__badge[title],
.bb-emoji-picker__btn[title],
.bb-emoji-picker__btn[data-fl-tip] {
    cursor: help;
}

/* Badge rows used pointer-events:none so drag didn't catch them —
   re-enable hits on the symbols themselves so tips can show. */
.lmb-card__badges,
.lmb-card__badges-row .lmb-card__badges {
    pointer-events: none;
}

.lmb-card__badges .bb-symbol,
.lmb-card__badges .lmb-card__badge,
.lmb-card__badges-row .bb-symbol,
.lmb-card__badges-row .lmb-card__badge {
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .fl-tip {
        transition: opacity 0.08s ease;
    }
}