/* Non-modal install banner (UX-034): it sits above the bottom navigation and never blocks the page. */
.app-install-banner {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 8px);
    z-index: 1200;
    max-width: 480px;
    margin-inline: auto;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-divider, #e2e8f0);
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary, #14213d);
    box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
    font-family: Vazirmatn, Roboto, sans-serif;
}

@media (min-width: 961px) {
    .app-install-banner { bottom: 16px; }
}

.app-install-text,
.app-install-help {
    margin: 0;
    line-height: 1.8;
}

.app-install-help {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary, #52617a);
    font-size: .875rem;
}

.app-install-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.app-install-actions button {
    flex: 1;
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.app-install-accept {
    background: var(--mud-palette-primary, #5b2eff);
    color: var(--mud-palette-primary-text, #fff);
}

.app-install-dismiss {
    background: var(--mud-palette-action-default-hover, #edf1f8);
    color: var(--mud-palette-text-primary, #34425b);
}

.app-install-actions button:focus-visible {
    outline: 3px solid var(--mud-palette-primary, #5b2eff);
    outline-offset: 2px;
}