/* live-pwa.css — banner gợi ý cài PWA. Toàn bộ scope dưới .lc-pwa.
   KHÔNG khai :root { --xxx } ở đây: token đã có trong live-variables.css (file DUY NHẤT được
   khai). Mọi màu là var(--lc-*), không hardcode hex / font-family (UI Theme Rule).
   Tất cả token dùng bên dưới đều tồn tại ở CẢ khối sáng lẫn khối tối của live-variables.css. */

.lc-pwa {
    /* z-index 54: cao hơn nội dung trang (mọi khối trong [data-room] đều < 50) nhưng TRONG đủ
       modal của LiveSite (.lc-modal z-60, live-stage.css). Để banner đè modal là chặn thao tác
       chính của người dùng trong phòng — không được phép. Toast-stack (55) cũng ở trên nó,
       vì toast là phản hồi tức thì của một hành động. */
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 54;
    padding: 0 var(--lc-space-3) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none; /* vùng rìa quanh card không chặn thao tác của trang */
}

/* BẮT BUỘC, đừng gỡ: `[hidden]` của preflight Tailwind là `[hidden]:where(...)` — specificity
   0,1,0 y hệt `.lc-pwa` / `.lc-pwa__card`, mà live-pwa.css nạp SAU tailwind.build.css nên
   `display: flex` bên dưới thắng theo thứ tự và thuộc tính hidden mất tác dụng hoàn toàn
   (hậu quả đã thấy: hiện cùng lúc cả banner cài lẫn banner hướng dẫn iOS trên desktop).
   Selector có attribute ⇒ 0,2,0, thắng lại mà không cần !important. */
.lc-pwa[hidden],
.lc-pwa__card[hidden] { display: none; }

.lc-pwa__card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-space-2) var(--lc-space-3);
    pointer-events: auto;
    border-radius: var(--lc-radius) var(--lc-radius) 0 0;
    border: 1px solid var(--lc-surface-variant);
    background-color: var(--lc-surface-container);
    color: var(--lc-on-surface);
    padding: var(--lc-space-3);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.12);
}

.lc-pwa__icon {
    font-size: 1.5rem;
    color: var(--lc-primary);
    flex: none;
    line-height: 1;
}

.lc-pwa__inline-icon {
    font-size: 1.05rem;
    color: var(--lc-on-surface);
    vertical-align: -0.2em;
}

.lc-pwa__text {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--lc-on-surface);
}

.lc-pwa__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lc-space-2);
    flex: none;
}

.lc-pwa__btn {
    appearance: none;
    border: 1px solid var(--lc-surface-variant);
    border-radius: 9999px;
    background-color: var(--lc-surface);
    color: var(--lc-on-surface);
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    padding: 0.625rem 1rem;
    min-height: 44px;               /* chạm được trên di động */
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.lc-pwa__btn:hover { background-color: var(--lc-surface-variant); }

.lc-pwa__btn--primary {
    border-color: var(--lc-primary-container);
    background-color: var(--lc-primary-container);
    /* Chữ trên --lc-primary-container dùng --lc-on-primary, KHÔNG phải --lc-on-primary-container
       (token đó LiveSite không có) — xem comment trong live-variables.css. */
    color: var(--lc-on-primary);
}

.lc-pwa__btn--primary:hover { background-color: var(--lc-primary-container); }

.lc-pwa__close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--lc-on-surface-variant);
    cursor: pointer;
    font-size: 1.25rem;
}

.lc-pwa__close:hover { background-color: var(--lc-surface-variant); }

/* ---- >= 640px: dạng pill, căn giữa ngang, cách đáy 1rem ---- */
@media (min-width: 640px) {
    .lc-pwa {
        padding: 0 var(--lc-space-3) 1rem;
        display: flex;
        justify-content: center;
    }

    .lc-pwa__card {
        max-width: 32rem;
        width: 100%;
        border-radius: var(--lc-radius);
        box-shadow: 0 4px 16px rgb(0 0 0 / 0.14);
    }
}

/* ---- Màn rất thấp (điện thoại xoay ngang): thu gọn, một dòng ---- */
@media (max-height: 420px) {
    .lc-pwa {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }

    .lc-pwa__card {
        gap: var(--lc-space-2);
        padding: var(--lc-space-2);
    }

    .lc-pwa__btn {
        min-height: 40px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ---- Người dùng yêu cầu giảm chuyển động: tắt hiệu ứng xuất hiện ---- */
@media (prefers-reduced-motion: reduce) {
    .lc-pwa__card,
    .lc-pwa__btn,
    .lc-pwa__close { transition: none; }
}