.sqhud {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: rgba(10,12,14,.78);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    padding: 10px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* more robust sizing */
    max-width: min(92vw, 520px);
    width: fit-content;
    box-sizing: border-box;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    /* prevent overlay from blocking taps on the scan view */
    pointer-events: none;
    /* help on notched devices / safe area */
    margin-bottom: env(safe-area-inset-bottom, 0px);
}

    .sqhud .sqhud-text {
        font-size: 14px;
        line-height: 1.1;
        /* allow message to wrap if needed */
        white-space: normal;
        /* keep it from becoming too tall */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.sqhud-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    box-shadow: 0 0 0 0 rgba(255,255,255,.0);
    animation: sqhudPulse 1.2s ease-in-out infinite;
    /* don’t shrink the dot when text wraps */
    flex: 0 0 auto;
}

.sqhud.warn .sqhud-dot {
    background: rgba(255,91,91,.95);
}

.sqhud.info .sqhud-dot {
    background: rgba(45,125,255,.95);
}

@keyframes sqhudPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,.25);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0);
    }
}