/* ============================================================================= * bulbal-install.css — CHỦ SỞ HỮU: phase-04 (hoàn thiện PWA + mời cài đặt). * * Style cho (src/widgets/bulbal-install-prompt.jsx) — dải mời cài * đặt PWA neo đáy màn hình + hộp thoại hướng dẫn thủ công cho iOS. Widget này KHÔNG nằm * trong cây DOM của TinodeWeb (root React riêng, xem src/index.js) nên CSS ở đây độc lập, * không style đè lên phần tử của Tinode. * * Nạp SAU css/bulbal-tokens.css (P05 thêm dòng , xem bàn giao trong report phase-04). * CẤM hardcode hex/rgba, CẤM ép mức ưu tiên bằng cờ CSS đặc biệt (dấu chấm than + từ khoá * tiếng Anh cho "quan trọng") — chỉ dùng var(--bb-*) khai báo ở bulbal-tokens.css. * ============================================================================= */ /* ---- 🔴 CHỪA CHỖ CHO DẢI MỜI — vá lỗi tích hợp P05 (260730) ---------------------- * * LỖI: dải mời `position: fixed; bottom: 0; z-index: 20` CHE TRỌN ô soạn tin, người * dùng không nhắn được. Đo thật lúc lỗi: * mobile 390×780 : dải 651→780, ô soạn tin 705→770 ⇒ chồng lấn * desktop 1440×900: dải 835→900, ô soạn tin 817→882 ⇒ chồng lấn * elementFromPoint giữa ô nhập trả về NÚT CÀI ĐẶT, không phải textarea * P03 (emoji) và P04 (dải mời) mỗi bên test riêng đều đạt — chỉ khi ghép mới lộ. * * CÁCH VÁ: không né chỗ mà CHỪA chỗ — thu chiều cao khung app đúng bằng chiều cao dải. * `#app-container` có `box-sizing: border-box` (đã kiểm) nên padding-bottom ăn vào phần * nội dung, đẩy ô soạn tin lên trên dải thay vì bị dải phủ. * Đo sau khi vá: chồng lấn = false ở cả 2 kích thước, elementFromPoint = TEXTAREA. * * GIỚI HẠN ĐÃ BIẾT: dùng `:has()` (Chrome 105+/Safari 15.4+). Trình duyệt quá cũ không * hỗ trợ thì rơi về trạng thái chồng lấn như cũ — không tệ hơn hiện trạng. Muốn chắc * chắn thì widget phải tự gắn class lên , thuộc phạm vi JSX của P04. * Hai giá trị dưới đây phải ≥ chiều cao thật của dải; đo lại nếu đổi bố cục dải. */ body:has(.bulbal-install-bar) #app-container { padding-bottom: 136px; /* dải xuống dòng 2 hàng ở màn hẹp */ } @media (min-width: 641px) { body:has(.bulbal-install-bar) #app-container { padding-bottom: 72px; /* dải 1 hàng */ } } /* ---- Dải mời (neo đáy, trên safe-area của iPhone) -------------------------------- */ .bulbal-install-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; /* trên nội dung thường (header base.css z-index:4), dưới menu/emoji-picker (quy ước sẵn có: css/bulbal-panels.css `ul.menu{z-index:30}`, css/bulbal-emoji.css) và dưới hộp thoại hướng dẫn iOS (z-index:40). */ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: var(--bb-chat-max); margin: 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bb-bg-side); border-top: 1px solid var(--bb-line); box-shadow: var(--bb-sh-2); font-family: var(--bb-font); } .bulbal-install-bar__text { flex: 1 1 220px; min-width: 0; } .bulbal-install-bar__title { font-size: var(--bb-fs-name); font-weight: 600; color: var(--bb-txt-1); } .bulbal-install-bar__desc { margin-top: 2px; font-size: var(--bb-fs-preview); color: var(--bb-txt-2); } .bulbal-install-bar__actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; margin-left: auto; } /* ---- Nút dùng chung cho dải mời + hộp thoại iOS ----------------------------------- * base.css có rule `button{}` toàn cục kiểu Material cũ (text-transform:uppercase, * margin, box-shadow, min-width, border-radius:4px) — đè tường minh ở đây để nút theo * đúng thiết kế Bulbal (chữ thường, không shadow rời), KHÔNG lệ thuộc thứ tự nạp CSS. */ .bulbal-install-btn { height: var(--bb-touch); min-width: 0; margin: 0; padding: 0 16px; border: 1px solid transparent; border-radius: var(--bb-r-pill); box-shadow: none; font-family: var(--bb-font); font-size: var(--bb-fs-preview); font-weight: 600; text-transform: none; white-space: nowrap; cursor: pointer; transition: background-color var(--bb-dur) var(--bb-ease), opacity var(--bb-dur) var(--bb-ease); } .bulbal-install-btn--primary { background: var(--bb-brand); color: var(--bb-txt-on-brand); } .bulbal-install-btn--primary:hover { background: var(--bb-brand-600); } .bulbal-install-btn--ghost { background: transparent; border-color: var(--bb-line); color: var(--bb-txt-2); } .bulbal-install-btn--ghost:hover { background: var(--bb-hover); } /* ---- Hộp thoại hướng dẫn cài trên iOS --------------------------------------------- */ .bulbal-install-guide__backdrop { position: fixed; inset: 0; z-index: 40; /* trên dải mời (20) và trên menu/emoji-picker (30) — đây là hộp thoại thật. */ display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); /* THIẾU TOKEN: chưa có --bb-scrim trong bulbal-tokens.css (đã ghi nhận từ * css/bulbal-media.css) -> dùng cùng fallback upstream đã light-dark() sẵn, KHÔNG * hardcode màu mới. Khi phase nào bổ sung --bb-scrim, chỗ này tự động ăn theo. */ background-color: var(--bb-scrim, var(--clr-overlay-white-strong)); } .bulbal-install-guide { width: 100%; max-width: 360px; padding: 20px; border-radius: var(--bb-r-bub); background: var(--bb-bg-side); box-shadow: var(--bb-sh-3); font-family: var(--bb-font); } .bulbal-install-guide__title { margin-bottom: 12px; font-size: var(--bb-fs-title); font-weight: 600; color: var(--bb-txt-1); } .bulbal-install-guide__steps { margin: 0 0 16px; padding-left: 20px; font-size: var(--bb-fs-base); color: var(--bb-txt-1); line-height: 1.5; } .bulbal-install-guide__steps li + li { margin-top: 6px; } /* ---- Chuyển động: tôn trọng prefers-reduced-motion -------------------------------- */ @media (prefers-reduced-motion: reduce) { .bulbal-install-btn { transition: none; } } /* ---- Mobile hẹp: dải mời xếp dọc cho đủ chỗ chạm --------------------------------- */ @media (max-width: 420px) { .bulbal-install-bar { align-items: stretch; } .bulbal-install-bar__actions { margin-left: 0; justify-content: flex-end; } }