/* Small build/version footer at the bottom of every view */

.zol-version {
    position: fixed;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-family: 'Menlo', 'Monaco', monospace;
    color: rgba(14, 31, 20, 0.35);
    pointer-events: none;
    z-index: 5;
    letter-spacing: 0.04em;
    user-select: none;
    /* Pill background for legibility on dark backgrounds */
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 2px 10px;
    border-radius: 999px;
    line-height: 1.4;
}

/* Tweak placement a bit on the immersive scanner page */
.scanner-page .zol-version {
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.55);
}

/* When the browser shows a safe-area inset (notch, home bar), nudge it up */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .zol-version {
        bottom: calc(8px + env(safe-area-inset-bottom));
    }
}