/* ============================================================ mini-app.css — LINE Mini App 模式覆蓋樣式 僅在 時生效，對一般瀏覽器零影響 ============================================================ */ /* Mini App 模式隱藏桌機元素 */ .is-mini-app .site-footer { display: none !important; } /* 聊天氣泡上移，避免被浮動導覽列遮住（手機版通用） */ @media (max-width: 767px) { #upChatBtn, #upChatWidget, #upChatMinimized { bottom: calc(24px + 76px + env(safe-area-inset-bottom)) !important; } /* 限制展開高度，避免超出畫面頂端 */ #upChatWidget { height: calc(100dvh - 24px - 76px - env(safe-area-inset-bottom)) !important; } } /* 主內容下方留空給浮動導覽列 + iOS 安全區（手機版通用） */ @media (max-width: 767px) { body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } } /* ---- 底部浮動膠囊導覽列 ---- */ .mini-app-bottom-nav { /* 桌機：預設隱藏；手機：媒體查詢開啟 */ display: none; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0 auto; width: calc(100vw - 48px); max-width: 360px; height: 60px; background: rgba(38, 26, 18, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 40px; border: 1px solid rgba(170, 145, 119, 0.22); z-index: 1050; justify-content: space-around; align-items: center; padding: 6px 8px; box-shadow: 0 6px 28px rgba(38, 26, 18, 0.32), 0 1px 6px rgba(0, 0, 0, 0.14); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* 手機版自動顯示（不需要 is-mini-app class） */ @media (max-width: 767px) { .mini-app-bottom-nav { display: flex; } } /* 向下捲動時收窄 */ .mini-app-bottom-nav.scrolled-down { width: calc(100vw - 96px); padding: 6px 4px; } .mini-app-nav-item { display: flex; align-items: center; justify-content: center; text-decoration: none; color: rgba(240, 217, 200, 0.55); padding: 10px 18px; border-radius: 30px; min-height: 44px; min-width: 44px; transition: color 0.18s ease, background 0.18s ease, padding 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .mini-app-bottom-nav.scrolled-down .mini-app-nav-item { padding: 10px 14px; } .mini-app-nav-item span { display: none; } .mini-app-nav-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; } .mini-app-nav-item.active { color: #f0d9c8; background: rgba(170, 145, 119, 0.28); } .mini-app-nav-item:active { color: #f0d9c8; background: rgba(170, 145, 119, 0.18); } /* 購物車頁與結帳頁隱藏底部導覽列，避免與底部合計列衝突 */ body.page-cart .mini-app-bottom-nav, body.checkout-page .mini-app-bottom-nav { display: none !important; } /* 購物車頁：氣泡上移至結帳列之上（結帳列約 68px） */ @media (max-width: 991px) { body.page-cart #upChatBtn, body.page-cart #upChatWidget, body.page-cart #upChatMinimized { bottom: calc(24px + 68px + env(safe-area-inset-bottom)) !important; } body.page-cart #upChatWidget { height: calc(100dvh - 24px - 68px - env(safe-area-inset-bottom)) !important; } } /* 結帳頁：氣泡上移至底部結帳列之上（同 cart，≤ 991px 出現） */ @media (max-width: 991px) { body.checkout-page #upChatBtn, body.checkout-page #upChatWidget, body.checkout-page #upChatMinimized { bottom: calc(24px + 68px + env(safe-area-inset-bottom)) !important; } body.checkout-page #upChatWidget { height: calc(100dvh - 24px - 68px - env(safe-area-inset-bottom)) !important; } } /* 購物車金額徽章 */ .mini-app-cart-total { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); background: rgba(170, 145, 119, 0.9); color: #fff; font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.2px; pointer-events: none; }