/* ============================================================================
   Kodevix — PWA notices (install, update, offline, queued registrations)

   One shape for every message: same size, same entrance, same rhythm. They show
   up at moments the person did not ask for, so they stay quiet — a single
   16px-ish pill that slides up once and never moves again.

   RTL-safe (logical properties only) and themed from site.css variables, with
   literal fallbacks so the file also works on a page that loads it alone.
   ========================================================================== */

.kv-pwa {
    position: fixed;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding-inline: 1rem;
    pointer-events: none;                 /* the page underneath stays usable */
}

.kv-pwa-bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: min(30rem, 100%);
    padding: .7rem .8rem .7rem 1rem;
    border-radius: 14px;
    background: var(--card, #fff);
    color: var(--ink, #1b1836);
    border: 1px solid var(--line, #eceef3);
    box-shadow: var(--shadow-lg, 0 18px 50px rgba(24, 27, 53, .18));
    font-size: .92rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s cubic-bezier(.4, 0, .2, 1), transform .35s cubic-bezier(.4, 0, .2, 1);
}

.kv-pwa-bar.is-in {
    opacity: 1;
    transform: none;
}

.kv-pwa-msg { flex: 1; min-width: 0; }

.kv-pwa-act {
    flex: none;
    border: 0;
    border-radius: 10px;
    padding: .4rem .85rem;
    font-weight: 700;
    font-size: .88rem;
    color: #fff;
    background: var(--brand-500, #6d5efc);
    cursor: pointer;
    transition: filter .2s;
}

.kv-pwa-act:hover { filter: brightness(1.08); }

.kv-pwa-x {
    flex: none;
    border: 0;
    background: none;
    color: var(--muted, #6b7090);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
    opacity: .7;
    transition: opacity .2s;
}

.kv-pwa-x:hover { opacity: 1; }

/* A coloured edge carries the meaning without turning the whole pill loud. */
.kv-pwa-offline { border-inline-start: 3px solid #e0a800; }
.kv-pwa-queued,
.kv-pwa-sent { border-inline-start: 3px solid #1c9e6a; }
.kv-pwa-update,
.kv-pwa-install { border-inline-start: 3px solid var(--brand-500, #6d5efc); }

.kv-pwa-pending {
    border-inline-start: 3px solid var(--muted, #6b7090);
    font-size: .86rem;
    color: var(--muted, #6b7090);
}

@media (prefers-reduced-motion: reduce) {
    .kv-pwa-bar { transition: none; transform: none; opacity: 1; }
}