/* =============================================================================
   INSTALL CARD + STANDALONE FIXES
   =============================================================================
   The card the console offers once somebody is signed in, and the handful of
   rules an installed app needs that a browser tab does not.
   ========================================================================== */

.nzpwa {
    position: fixed;
    z-index: 4000;
    left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 44px 14px 14px;
    background: var(--nz-surface, #fff);
    border: 1px solid var(--nz-border, #E5EAF2);
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(0, 36, 60, .18), 0 2px 6px rgba(0, 36, 60, .06);

    /* It arrives from below and it leaves the same way. Starting hidden means
       a page that never shows it costs nothing. */
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .24s ease, transform .24s ease;
}

.nzpwa.is-in { opacity: 1; transform: translateY(0); }

.nzpwa__icon {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 13px;
    overflow: hidden;
}

.nzpwa__icon img { width: 100%; height: 100%; display: block; }

.nzpwa__copy { flex: 1; min-width: 0; }

.nzpwa__copy strong {
    display: block;
    font-family: var(--nz-font-display, inherit);
    font-size: 14.5px; font-weight: 600;
    color: var(--nz-navy, #00243C);
}

.nzpwa__copy span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px; line-height: 1.45;
    color: var(--nz-text-2, #475569);
}

.nzpwa__copy b { font-weight: 700; color: var(--nz-navy, #00243C); }

.nzpwa__acts { display: flex; align-items: center; gap: 8px; flex: none; }

.nzpwa__go,
.nzpwa__no {
    font: inherit;
    font-size: 13px; font-weight: 600;
    white-space: nowrap;
    border-radius: 10px;
    cursor: pointer;
    /* 44px is the smallest target a thumb reliably hits — this card is mostly
       read on a phone, in a field. */
    min-height: 44px;
    padding: 0 16px;
}

.nzpwa__go { color: #fff; background: var(--nz-blue, #004AF7); border: 0; }
.nzpwa__go:hover { filter: brightness(1.08); }

.nzpwa__no {
    color: var(--nz-text-2, #475569);
    background: transparent;
    border: 1px solid var(--nz-border, #E5EAF2);
}

.nzpwa__no:hover { background: var(--nz-surface-alt, #F5F8FC); }

.nzpwa__x {
    position: absolute;
    top: 8px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    font-size: 14px;
    color: var(--nz-text-3, #94A3B8);
    background: transparent;
    border: 0; border-radius: 9px;
    cursor: pointer;
}

.nzpwa__x:hover { background: var(--nz-surface-alt, #F1F5F9); color: var(--nz-navy, #00243C); }

/* On a wide screen it is a card in the corner, not a bar across the foot. */
@media (min-width: 720px) {
    .nzpwa { left: auto; right: 22px; bottom: 22px; max-width: 460px; }
}

/* On a phone the two buttons take the full width under the copy, because a
   row of four things at 360px leaves each of them too narrow to read. */
@media (max-width: 520px) {
    .nzpwa { flex-wrap: wrap; padding-right: 14px; }
    .nzpwa__copy { flex: 1 1 calc(100% - 61px); }
    .nzpwa__acts { flex: 1 1 100%; }
    .nzpwa__go, .nzpwa__no { flex: 1; justify-content: center; }
    .nzpwa__x { top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .nzpwa { transition: none; transform: none; }
}


/* ------------------------------------------------------------- standalone

   An installed app has no browser chrome, so the status bar and the home
   indicator sit on top of the page unless the layout is told about them. */

@media (display-mode: standalone) {
    body { overscroll-behavior-y: none; }

    .main-workspace,
    .dashboard-content {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Nothing to go "back" to in a standalone window, so a browser-ish
       affordance would be a dead end. */
    .nzpwa { display: none; }
}
