/* Floating Telegram / WhatsApp chat bubbles (Integrations tab, kind=chat). Standalone sheet so every surface can load it cheaply — the shared public/member layouts AND the standalone auth pages (signin/signup/ forgot/reset render their own , no layout). */ /* ======================================================================== FLOATING CHAT BUTTONS — Telegram / WhatsApp (Integrations tab) Rendered by partials/chat_buttons.html on public + member pages. Wrappers are pointer-transparent; only the bubbles take clicks. ======================================================================== */ .chatw { position: fixed; bottom: 18px; z-index: 950; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .chatw-left { left: 18px; } .chatw-right { right: 18px; } .chatw-btn { pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22); opacity: 1; transform: scale(1); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms ease-out, opacity 220ms cubic-bezier(0.23, 1, 0.32, 1); } @starting-style { .chatw-btn { opacity: 0; transform: scale(0.85); } } .chatw-btn svg { width: 27px; height: 27px; display: block; fill: currentColor; } .chatw-telegram { background: #229ed9; } .chatw-telegram svg { transform: translateX(-1px); } /* plane glyph reads centred */ .chatw-whatsapp { background: #25d366; } @media (hover: hover) and (pointer: fine) { .chatw-btn:hover { transform: scale(1.07) translateY(-1px); box-shadow: 0 7px 20px rgba(0,0,0,.26); } } .chatw-btn:active { transform: scale(0.94); } @media (max-width: 780px) { .chatw { bottom: 14px; } .chatw-left { left: 14px; } .chatw-right { right: 14px; } .chatw-btn { width: 48px; height: 48px; } .chatw-btn svg { width: 25px; height: 25px; } } @media (prefers-reduced-motion: reduce) { .chatw-btn { transition: opacity 200ms ease; } .chatw-btn:hover, .chatw-btn:active { transform: none; } @starting-style { .chatw-btn { transform: none; } } }