/**
 * OOI Platform V1 — Identity Bubble
 */

.ooi-identity-bubble {
    --ooi-bubble-size: 96px;
    --ooi-bubble-ring: 5px;
    --ooi-bubble-indicator: 24px;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ooi-space-sm);
    max-width: calc(var(--ooi-bubble-size) + 32px);
    margin: 0;
    color: var(--ooi-text);
    text-align: center;
}

.ooi-identity-bubble--xs {
    --ooi-bubble-size: 32px;
    --ooi-bubble-ring: 2px;
    --ooi-bubble-indicator: 13px;
}

.ooi-identity-bubble--s {
    --ooi-bubble-size: 56px;
    --ooi-bubble-ring: 3px;
    --ooi-bubble-indicator: 17px;
}

.ooi-identity-bubble--m {
    --ooi-bubble-size: 96px;
    --ooi-bubble-ring: 5px;
    --ooi-bubble-indicator: 23px;
}

.ooi-identity-bubble--l {
    --ooi-bubble-size: 140px;
    --ooi-bubble-ring: 6px;
    --ooi-bubble-indicator: 28px;
}

.ooi-identity-bubble--xl {
    --ooi-bubble-size: 220px;
    --ooi-bubble-ring: 8px;
    --ooi-bubble-indicator: 34px;
}

.ooi-identity-bubble__link {
    display: inline-flex;
    border-radius: var(--ooi-radius-xl);
    color: inherit;
    text-decoration: none;
}

.ooi-identity-bubble__ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ooi-bubble-size);
    height: var(--ooi-bubble-size);
    padding: var(--ooi-bubble-ring);
    box-sizing: border-box;
    border-radius: var(--ooi-radius-xl);
    background: linear-gradient(
        135deg,
        var(--ooi-primary),
        var(--ooi-secondary)
    );
    box-shadow:
        var(--ooi-shadow-md),
        0 0 0 6px rgba(114, 112, 172, .06);
    transition:
        transform var(--ooi-transition),
        box-shadow var(--ooi-transition);
}

.ooi-identity-bubble--level-minimal
.ooi-identity-bubble__ring {
    background: linear-gradient(
        135deg,
        var(--ooi-text-light),
        rgba(100, 116, 139, .55)
    );
}

.ooi-identity-bubble--level-enriched
.ooi-identity-bubble__ring {
    background: linear-gradient(
        135deg,
        var(--ooi-secondary),
        var(--ooi-primary)
    );
}

.ooi-identity-bubble--level-professional
.ooi-identity-bubble__ring {
    background: linear-gradient(
        135deg,
        var(--ooi-primary),
        var(--ooi-accent)
    );
}

.ooi-identity-bubble--level-complete
.ooi-identity-bubble__ring {
    background: linear-gradient(
        135deg,
        var(--ooi-primary),
        var(--ooi-secondary),
        var(--ooi-success)
    );
}

.ooi-identity-bubble__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 3px solid var(--ooi-white);
    border-radius: var(--ooi-radius-xl);
    background: var(--ooi-surface);
}

.ooi-identity-bubble__image,
.ooi-identity-bubble__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: var(--ooi-radius-xl) !important;
}

.ooi-identity-bubble__image {
    object-fit: cover !important;
    object-position: center;
}

.ooi-identity-bubble__initials {
    background: linear-gradient(
        145deg,
        var(--ooi-primary),
        #57558f
    );
    color: var(--ooi-white);
    font-size: calc(var(--ooi-bubble-size) * .29);
    font-weight: 800;
    letter-spacing: .035em;
}

.ooi-identity-bubble__indicator {
    position: absolute;
    right: -2px;
    bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ooi-bubble-indicator);
    height: var(--ooi-bubble-indicator);
    box-sizing: border-box;
    border: 3px solid var(--ooi-white);
    border-radius: var(--ooi-radius-xl);
    background: var(--ooi-success);
    color: #365516;
    font-size: calc(var(--ooi-bubble-indicator) * .53);
    font-weight: 900;
    box-shadow: var(--ooi-shadow-sm);
}

.ooi-identity-bubble__caption {
    max-width: 100%;
    color: var(--ooi-text);
    font-size: var(--ooi-font-sm);
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ooi-identity-bubble__link:hover
.ooi-identity-bubble__ring,
.ooi-identity-bubble__link:focus-visible
.ooi-identity-bubble__ring {
    transform: translateY(-3px) scale(1.025);
    box-shadow:
        var(--ooi-shadow-lg),
        0 0 0 8px rgba(128, 197, 207, .09);
}

.ooi-identity-bubble__link:focus-visible {
    outline: 3px solid rgba(128, 197, 207, .55);
    outline-offset: 5px;
}

.ooi-identity-bubble--xs
.ooi-identity-bubble__indicator {
    border-width: 2px;
}

.ooi-identity-bubble--xs
.ooi-identity-bubble__media,
.ooi-identity-bubble--s
.ooi-identity-bubble__media {
    border-width: 2px;
}

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

    .ooi-identity-bubble__link:hover
    .ooi-identity-bubble__ring {
        transform: none;
    }
}