/* Associates Diary — PWA UX layer
 *
 * Floating elements that surface the install / update / offline UX
 * once the service worker is registered. Sits above app chrome but
 * never intercepts page interaction except on the elements themselves.
 */

/* 1. Install prompt pill */
.ad-pwa-install {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;                 /* above bootstrap modals (1050) */
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(99, 102, 241, .35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ad-pwa-install:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(99, 102, 241, .42);
}
.ad-pwa-install i {
    font-size: 1rem;
}

/* 2. iOS Safari "Add to Home Screen" hint */
.ad-pwa-ios-hint {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(420px, calc(100% - 2rem));
    background: #fff;
    color: #111827;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .25);
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}
.ad-pwa-ios-hint__body {
    flex: 1;
    font-size: .85rem;
    line-height: 1.45;
}
.ad-pwa-ios-hint__body strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .25rem;
}
.ad-pwa-ios-hint__body p {
    margin: 0;
    color: #4b5563;
}
.ad-pwa-ios-hint__body i {
    color: #6366f1;
}
.ad-pwa-ios-hint__close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #9ca3af;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}
.ad-pwa-ios-hint__close:hover { color: #111827; }

/* 3. Update toast */
.ad-pwa-update {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 1080;
    background: #0f172a;
    color: #f8fafc;
    padding: .65rem 1rem;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .35);
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: .9rem;
}
.ad-pwa-update__btn {
    appearance: none;
    border: 0;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    font-weight: 600;
    border-radius: 999px;
    padding: .35rem .85rem;
    cursor: pointer;
}
.ad-pwa-update__btn:hover {
    filter: brightness(1.05);
}

/* 4. Offline indicator */
.ad-pwa-offline {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;
    background: #b91c1c;
    color: #fff;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(185, 28, 28, .35);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

/* Avoid stacking issues if multiple appear at once */
.ad-pwa-update + .ad-pwa-install,
.ad-pwa-install + .ad-pwa-ios-hint {
    margin-bottom: 4rem;
}

/* Don't show install pill on the iOS hint surface */
@supports (-webkit-touch-callout: none) {
    .ad-pwa-install { display: none; }
}