/**
 * install-prompt.css
 *
 * Progressive Web App install banner, compact desktop placement, mobile-safe spacing, and install/dismiss button presentation.
 *
 * Sections:
 * 1. Fixed banner shell
 * 2. Desktop compact placement
 * 3. Text and action controls
 *
 * Troubleshooting:
 * - JavaScript keeps the element hidden until installation is relevant.
 * - On iOS the Install button is hidden and manual instructions are shown.
 */

/* 1. Mobile-first banner spans the viewport above the bottom safe area. */
.install-prompt{
    position:fixed;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:80;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid rgba(53,194,165,.22);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(28,37,45,.96), rgba(17,22,29,.94));
    box-shadow:0 18px 40px rgba(0,0,0,.34);
}

/* 2. Desktop: compact toast in the lower-right corner. */
@media (min-width:621px){
    .install-prompt{
            left:auto;
            right:18px;
            width:min(420px, calc(100vw - 36px));
            padding:9px 10px 9px 12px;
            gap:9px;
        }

    .install-prompt strong{
            font-size:12px;
        }

    .install-prompt span{
            font-size:11px;
        }

    #installButton,
        #installDismiss{
            min-height:30px;
        }

    #installDismiss{
            width:30px;
        }
}

/* 3. Child layout and install/dismiss controls. */
.install-prompt[hidden]{
    display:none;
}

.install-prompt div{
    display:grid;
    gap:2px;
    min-width:0;
    flex:1;
}

.install-prompt strong{
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.install-prompt span{
    color:var(--muted);
    font-size:12px;
    line-height:1.3;
}

#installButton{
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
}

#installDismiss{
    width:34px;
    min-height:34px;
    padding:0;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    color:var(--muted);
}