/* Burbujas de Usuarios en Línea */

#oub-container {
    --oub-size: 56px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none; /* la pantalla sigue siendo clickeable */
    z-index: 9999;
}

.oub-bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--oub-size);
    height: var(--oub-size);
    will-change: transform;
}

.oub-sway {
    width: 100%;
    height: 100%;
    animation: oub-sway 3.4s ease-in-out infinite alternate;
}

.oub-face {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5px;
    border: 2px solid rgba(170, 205, 255, .65);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .45), rgba(150, 190, 255, .18) 55%, rgba(120, 100, 255, .22));
    box-shadow: 0 0 14px rgba(120, 160, 255, .40), inset 0 0 12px rgba(255, 255, 255, .28);
    cursor: pointer;
    pointer-events: auto; /* solo la burbuja recibe clics */
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.oub-face img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.oub-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(90, 80, 200, .75);
    color: #fff;
    font: 700 calc(var(--oub-size) * .42) / 1 sans-serif;
}

/* brillo de la burbuja */
.oub-face::after {
    content: "";
    position: absolute;
    top: 9%;
    left: 16%;
    width: 34%;
    height: 20%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transform: rotate(-28deg);
    pointer-events: none;
}

.oub-face:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* al llegar arriba, se mecen suavemente */
.oub-face.oub-hover {
    animation: oub-bob 2.2s ease-in-out infinite;
}

@keyframes oub-sway {
    from { transform: translateX(calc(var(--oub-amp, 12px) * -1)); }
    to   { transform: translateX(var(--oub-amp, 12px)); }
}

@keyframes oub-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (max-width: 600px) {
    #oub-container { --oub-size: 44px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .oub-sway,
    .oub-face.oub-hover {
        animation: none;
    }
}


/* ---- Burbujas de usuarios registrados sin sesión (efervescencia) ---- */

.oub-bubble.oub-fizz {
    top: auto;            /* se ancla abajo (bottom lo fija el JS) */
    opacity: .8;
}

.oub-fizz .oub-face {
    border-color: rgba(190, 190, 200, .55);
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .30), rgba(170, 170, 180, .14) 55%, rgba(120, 120, 130, .16));
    box-shadow: 0 0 10px rgba(160, 160, 170, .30), inset 0 0 10px rgba(255, 255, 255, .18);
    filter: grayscale(85%);
    pointer-events: none; /* las grises no estorban los clics de la página */
    cursor: default;
}

.oub-fizz .oub-initial {
    background: rgba(130, 130, 140, .65);
}

.oub-fizz.oub-size-small  { width: var(--oub-size-small, 28px);  height: var(--oub-size-small, 28px); }
.oub-fizz.oub-size-medium { width: var(--oub-size-medium, 42px); height: var(--oub-size-medium, 42px); }
.oub-fizz.oub-size-large  { width: var(--oub-size-large, 60px);  height: var(--oub-size-large, 60px); }

/* sube de abajo hacia arriba en bucle, como burbuja de gaseosa */
.oub-fizz-rise {
    width: 100%;
    height: 100%;
    animation-name: oub-fizz-cycle;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes oub-fizz-cycle {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translateY(calc(var(--oub-fizz-rise, -95vh) * .5)) translateX(var(--oub-amp, 10px)); }
    88%  { opacity: 1; }
    100% { transform: translateY(var(--oub-fizz-rise, -95vh)) translateX(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .oub-fizz-rise { animation: none; }
}