.pwa-install-trigger {
    position: fixed;
    left: max(1rem, env(safe-area-inset-left));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 69;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    padding: .7rem 1.1rem;
    border: 0;
    border-radius: 999px;
    background: #183d34;
    color: #fbf6ed;
    box-shadow: 0 8px 20px rgba(12, 12, 10, .24);
    cursor: pointer;
    font-family: Manrope, system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform 180ms ease, opacity 180ms ease, background-color 180ms ease;
}

.pwa-install-trigger::before {
    content: "↓";
    margin-right: .45rem;
    font-size: 1rem;
    line-height: 1;
}

.pwa-install-trigger:hover {
    background: #245548;
    transform: translateY(-2px);
}

.pwa-install-trigger:focus-visible {
    outline: 3px solid #aa7f55;
    outline-offset: 3px;
}

.pwa-notice-visible .pwa-install-trigger {
    opacity: 0;
    pointer-events: none;
    transform: translateY(.5rem);
}

.pwa-notice {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 70;
    display: flex;
    width: min(29rem, calc(100vw - 2rem));
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 14px;
    background: #183d34;
    color: #fbf6ed;
    box-shadow: 0 8px 24px rgba(12, 12, 10, 0.24);
    font-family: Manrope, system-ui, sans-serif;
    animation: pwa-notice-enter 240ms cubic-bezier(.22, 1, .36, 1) both;
}

.pwa-notice--leaving {
    animation: pwa-notice-leave 180ms ease-in both;
}

.pwa-notice__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
}

.pwa-notice__title {
    font-family: "The Seasons", "Noto Serif", Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.2;
}

.pwa-notice__message {
    color: rgba(251, 246, 237, .86);
    font-size: .78rem;
    line-height: 1.45;
    text-wrap: pretty;
}

.pwa-notice__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
}

.pwa-notice__action,
.pwa-notice__close {
    min-height: 2.75rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
}

.pwa-notice__action {
    padding: .65rem 1rem;
    background: #fbf6ed;
    color: #183d34;
}

.pwa-notice__close {
    padding: .65rem .75rem;
    background: transparent;
    color: rgba(251, 246, 237, .8);
}

.pwa-notice__action:hover,
.pwa-notice__action:focus-visible {
    background: #e9e0d1;
}

.pwa-notice__close:hover,
.pwa-notice__close:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.pwa-notice__action:focus-visible,
.pwa-notice__close:focus-visible {
    outline: 2px solid #fbf6ed;
    outline-offset: 2px;
}

@keyframes pwa-notice-enter {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pwa-notice-leave {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(.5rem); }
}

@media (max-width: 640px) {
    .pwa-install-trigger {
        left: max(.75rem, env(safe-area-inset-left));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        min-height: 3.1rem;
    }

    .pwa-notice {
        right: max(.75rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: max(.75rem, env(safe-area-inset-left));
        width: auto;
        align-items: stretch;
        flex-direction: column;
        gap: .75rem;
    }

    .pwa-notice__actions {
        width: 100%;
    }

    .pwa-notice__action {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-notice,
    .pwa-notice--leaving,
    .pwa-install-trigger {
        animation: none;
        transition: none;
    }
}