/* ============================================== MOBILE-WEB APP-DOWNLOAD BAR (#adb-bar) Bottom-pinned, mobile only. Hidden on desktop, when dismissed, on kid surfaces, on /app, and when the audio mini-player is visible (JS-driven). Stacks above the bottom-nav (1000) and mini-player (1001). ============================================== */ #adb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1002; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; padding-bottom: max(env(safe-area-inset-bottom), 0.6rem); background: var(--tnav-surface-solid, #FCFDFE); border-top: 1px solid var(--tnav-border, rgba(15, 40, 70, 0.08)); box-shadow: 0 -6px 20px rgba(20, 45, 85, 0.08); font-family: inherit; } /* When a bottom-nav is actually present (authenticated mobile), lift above it, mirroring the mini-player's own offset so the two never overlap. The .adb-above-nav class is added by app-download-bar.js only when a visible .bottom-nav exists, so guests (no bottom-nav) keep bottom: 0. */ #adb-bar.adb-above-nav { bottom: calc(var(--bottom-nav-height, 52px) + max(env(safe-area-inset-bottom), var(--android-nav-inset-bottom, 0px))); padding-bottom: 0.6rem; } /* Desktop: a phone app cannot be installed here. */ @media (min-width: 769px) { #adb-bar { display: none !important; } } /* Hidden states (dismissed via early inline on ; adb-hidden via JS). */ #adb-bar.adb-hidden, .adb-dismissed #adb-bar { display: none !important; } .adb-icon { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; } .adb-copy { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; font-weight: 600; line-height: 1.25; color: var(--tnav-ink, #1B2733); } .adb-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.35rem; background: var(--brand-primary, #00B4FF); color: #ffffff; font-size: 0.85rem; font-weight: 700; padding: 0.5rem 0.9rem; border-radius: 10px; text-decoration: none; white-space: nowrap; } .adb-cta:hover { background: #0096d6; color: #ffffff; text-decoration: none; } .adb-dismiss { flex: 0 0 auto; background: transparent; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0 0.25rem; color: var(--tnav-ink-muted, rgba(34, 34, 34, 0.62)); } .adb-dismiss:hover { color: var(--tnav-ink, #1B2733); } /* Dark mode (body.dark-mode only). */ body.dark-mode #adb-bar { background: var(--tnav-surface-solid, #1C1C20); border-top-color: var(--tnav-border, rgba(255, 255, 255, 0.08)); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.40); } body.dark-mode .adb-copy { color: var(--tnav-ink, #ECECEC); }