/* * components/chatbot.css — floating help-chatbot widget (partials/chatbot.ejs). * Bottom-right FAB + chat panel. Mobile: the panel is a full-width bottom sheet. */ /* z-index 1100 keeps the FAB above the bottom-nav (60) but BELOW dialogs * (--z-dialog:1200) so a confirm dialog is never overlapped by the FAB. */ .chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 1100; } /* Hide the whole widget while a full-screen overlay / popup / sidebar is open, * so the bubble (or an open panel) never sits on top of a filter sheet, the * search overlay, the profile drawer, an in-page modal, etc. Each class is * toggled on by that overlay's controller. */ body.is-search-open .chatbot, body.is-mobile-menu-open .chatbot, body.is-mobile-filters-open .chatbot, body.is-filter-sheet-open .chatbot, body.ordf-open .chatbot, body.appqr-open .chatbot, body.earn-modal-open .chatbot, body.cmine-open .chatbot, body.rd-infomodal-open .chatbot { display: none; } /* Floating action button. */ .chatbot__fab { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; background: var(--color-primary, #e5252a); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(229, 37, 42, .4); transition: transform .15s ease; } .chatbot__fab:hover { transform: scale(1.06); } .chatbot__fab-close { display: none; } .chatbot.is-open .chatbot__fab-open { display: none; } .chatbot.is-open .chatbot__fab-close { display: block; } /* Panel. */ .chatbot__panel { position: absolute; right: 0; bottom: 70px; width: 360px; max-width: calc(100vw - 40px); height: 520px; max-height: calc(100dvh - 120px); background: var(--color-bg, #fff); border: 1px solid var(--color-border, #e5e7eb); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); } .chatbot__panel[hidden] { display: none; } .chatbot__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--color-primary, #e5252a); color: #fff; } .chatbot__title { font-weight: 800; font-size: 0.98rem; } .chatbot__x { border: none; background: rgba(255, 255, 255, .18); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 0.9rem; display: grid; place-items: center; } .chatbot__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--color-bg-alt, #f7f8fa); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .chatbot__msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.4; word-break: break-word; } .chatbot__msg--bot { align-self: flex-start; background: #fff; color: var(--color-text, #111); border: 1px solid var(--color-border-soft, #eef1f5); border-bottom-left-radius: 4px; } .chatbot__msg--user { align-self: flex-end; background: var(--color-primary, #e5252a); color: #fff; border-bottom-right-radius: 4px; } .chatbot__msg--typing { color: var(--color-text-muted, #6b7280); letter-spacing: 2px; } /* One-tap action (e.g. Reorder) offered inline under a bot reply. */ .chatbot__action { align-self: flex-start; margin: -2px 0 2px; } .chatbot__action-btn { border: none; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 800; background: var(--color-primary, #e5252a); color: #fff; padding: 8px 16px; border-radius: 999px; box-shadow: 0 4px 12px rgba(229, 37, 42, .3); } .chatbot__action-btn:hover { filter: brightness(1.05); } .chatbot__action-btn:disabled { opacity: .6; cursor: default; } /* Deep-link buttons under a reply — navigation, styled like soft chips. */ .chatbot__links { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; align-self: flex-start; } .chatbot__link { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1.5px solid var(--color-primary, #e5252a); color: var(--color-primary, #e5252a); font-size: 0.78rem; font-weight: 700; text-decoration: none; } .chatbot__link:hover { background: var(--color-primary, #e5252a); color: #fff; } .chatbot__chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--color-bg, #fff); border-top: 1px solid var(--color-border-soft, #eef1f5); } .chatbot__chip { border: 1px solid var(--color-primary, #e5252a); background: var(--color-primary-soft, #fde8e8); color: var(--color-primary, #e5252a); font-size: 0.78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer; } .chatbot__chip:hover { background: var(--color-primary, #e5252a); color: #fff; } .chatbot__form { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--color-bg, #fff); border-top: 1px solid var(--color-border-soft, #eef1f5); } .chatbot__input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--color-border, #e5e7eb); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 0.9rem; outline: none; } .chatbot__input:focus { border-color: var(--color-primary, #e5252a); } .chatbot__send { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--color-primary, #e5252a); color: #fff; cursor: pointer; display: grid; place-items: center; } /* Mobile — full-width bottom sheet + FAB lifted clear of the bottom-nav. * Breakpoint is 767px to MATCH the bottom-nav (which shows up to 767px). * The old 560px cutoff left a 561–767px gap where the FAB sat at the * desktop bottom:20px and overlapped the 5-tab nav. */ @media (max-width: 767px) { .chatbot { right: 14px; bottom: 20px; } /* Phones: NO floating bubble — it overlapped filters / the sidebar and * "disturbed" the page. The chat now opens from the "Help & Chat" row in * the profile drawer (data-action="open-chat-from-menu"). */ .chatbot__fab { display: none; } /* >=16px so iOS doesn't auto-zoom when the chat input is focused. */ .chatbot__input { font-size: 16px; } /* Full-SCREEN page on mobile (per the user — reads better than a bottom * sheet). Covers the whole viewport; the panel header carries the ✕ to * close. safe-area padding keeps the title clear of the notch and the * input clear of the home indicator. */ .chatbot__panel { position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; } .chatbot__head { padding-top: calc(14px + env(safe-area-inset-top, 0)); } .chatbot__form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0)); } /* Lock the page behind the full-screen chat so it doesn't scroll through. */ body.is-chat-open { overflow: hidden; } }