.std-tip-overlay {
    --tip-island-font-size: 24px;
    position: absolute;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(42px) scale(0.84);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 12px;
    min-height: 72px;
    max-width: min(1600px, calc(100vw - 24px));
    padding: 14px 30px 16px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(18, 22, 28, 0.94) 0%, rgba(11, 14, 19, 0.98) 100%);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 38px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 260ms ease-out,
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 30;
}

.std-tip-overlay.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(-10%) scale(1);
    animation: tipIslandPopUp 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.std-tip-overlay.is-leaving {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.92);
}

@keyframes tipIslandPopUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(42px) scale(0.84);
    }

    55% {
        opacity: 1;
        transform: translateX(-50%) translateY(-16%) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(-10%) scale(1);
    }
}

.std-tip-overlay::before {
    content: '';
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-right: 14px;
    border-radius: 999px;
    background: #8aa4c7;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.std-tip-overlay[data-tone="analysis"]::before {
    background: #7dc4ff;
}

.std-tip-overlay[data-tone="story"]::before {
    background: #e5bb63;
}

.std-tip-overlay[data-tone="warning"]::before {
    background: #ff8a5b;
}

.std-tip-title,
.std-tip-value,
.std-tip-note {
    font-size: var(--tip-island-font-size);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.01em;
    color: #f4f7fb;
    white-space: nowrap;
}

.std-tip-overlay[data-layout="single"] {
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
}

.std-tip-overlay[data-layout="single"] .std-tip-title {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    white-space: nowrap;
}

.std-tip-overlay[data-layout="split"] {
    --tip-island-font-size: 21px;
    align-items: center;
    justify-content: center;
    row-gap: 4px;
}

.std-tip-overlay[data-layout="split"] .std-tip-title {
    flex: 0 0 100%;
    text-align: center;
    white-space: nowrap;
}

.std-tip-overlay[data-layout="split"] .std-tip-value {
    flex: 1 1 100%;
    text-align: center;
    white-space: nowrap;
}

.std-tip-overlay[data-layout="split"] .std-tip-note {
    flex: 1 1 100%;
    text-align: center;
    white-space: normal;
}

.std-tip-value:empty,
.std-tip-note:empty {
    display: none;
}

.std-tip-title {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

body[data-profile="mobile"][data-mode="individual"] .std-tip-overlay {
    --tip-island-font-size: 22px;
    bottom: calc(100% + 12px);
    min-height: 64px;
    max-width: calc(100vw - 8px);
    padding: 12px 20px 14px;
}

body[data-profile="mobile"][data-mode="individual"] .std-tip-overlay::before {
    width: 9px;
    height: 9px;
    margin-right: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .std-tip-overlay {
        transition: opacity 150ms ease-out;
        transform: translateX(-50%);
    }

    .std-tip-overlay.is-visible,
    .std-tip-overlay.is-leaving {
        transform: translateX(-50%);
        animation: none;
    }
}