/* PWA chrome: install sheet, update banner, live mail toasts, unread badges. */

/* Hidden until pwa.js finds an install path (beforeinstallprompt, or iOS Safari). */
.pwa-install-btn { display: none !important; }
.pwa-install-btn.available { display: flex !important; }

/* ---------- install sheet ---------- */
.pwa-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1080;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 16px;
    border: 1px solid var(--bs-border-color);
    border-radius: 14px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.pwa-install-banner.show { transform: none; opacity: 1; }
.pwa-install-icon { flex: 0 0 auto; border-radius: 11px; }
.pwa-install-body { flex: 1 1 200px; min-width: 0; }
.pwa-install-title { font-weight: 600; margin-bottom: 2px; }
.pwa-install-text { font-size: .875rem; color: var(--bs-secondary-color); }
.pwa-install-steps { margin: 6px 0 0; padding-left: 1.2rem; }
.pwa-install-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- update banner ---------- */
.pwa-update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 32px);
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: var(--bs-primary);
    color: var(--brand-on);
    font-size: .9rem;
    transform: translateX(-50%);
}

/* ---------- live mail ---------- */
.mail-toast { cursor: default; }
.mail-toast .toast-body { max-width: 100%; }
.toast-container { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important; z-index: 1085; }

.unread-dot { font-size: .5rem; }

@keyframes mail-row-in {
    from { background-color: rgba(var(--bs-primary-rgb), .18); }
    to   { background-color: transparent; }
}
.mail-row-new > td { animation: mail-row-in 2.5s ease-out; }

/* ---------- installed app ---------- */
/* No pull-to-refresh bounce revealing the page background behind the navbar. */
.pwa-standalone body { overscroll-behavior-y: none; }

/* Not Bootstrap's d-flex: that is !important and would defeat the [hidden] attribute. */
.notify-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------- account switcher ---------- */
.account-menu { min-width: 17rem; }
.account-menu form { margin: 0; }
.account-item { display: flex; align-items: center; gap: .5rem; max-width: 22rem; }
.account-item.active { cursor: default; }