/* Avalon — Part-Time Helper page chat widget adjustments. The base widget CSS (style.css) is left byte-identical to the tested build; everything site-specific lives here so the two can be updated independently. This file is loaded on the Part-Time Helper page only. */ /* ------------------------------------------------------------------ Placement: bottom-left. The widget ships bottom-right, but this page's bottom-right corner is occupied by the theme's scroll-to-top button. Bottom-left is also where the Joinchat button sat, so the chat affordance stays where visitors already expect it. ------------------------------------------------------------------ */ .cw-bubble, .cw-window, .cw-launcher-menu, .cw-promo { right: auto !important; left: 24px !important; } /* Launcher pills grow from the left edge instead of the right */ .cw-launcher-menu { align-items: flex-start !important; } /* Speech-bubble tail follows the promo card across */ .cw-promo::after { right: auto !important; left: 26px !important; } /* Sit above the theme header/sticky elements */ .cw-bubble, .cw-window, .cw-launcher-menu { z-index: 99999 !important; } .cw-promo { z-index: 99998 !important; } /* Replaced by this widget on this page (belt-and-braces — the PHP filter should already stop Joinchat rendering here) */ .joinchat { display: none !important; } /* The hand-coded WhatsApp promo card in this page's own content (a WPBakery Raw HTML block, revealed by a Simple Custom CSS and JS snippet that sets display:block on load). The widget's own promo card replaces it, so hide it here to stop the two overlapping. !important is required because that snippet writes an inline display:block. Note: that markup appears twice in the page content, so this hides both. */ .custom-wa-popup { display: none !important; } /* ------------------------------------------------------------------ Isolate the widget from the theme's inherited typography. TheGem sets `text-align: justify` on , which inherits into the chat bubbles and stretches the word spacing ("The Returning Customer Promotion"). Reset it on the widget subtree. Deliberately no !important: an ID-scoped selector already beats the inherited value, and leaving it off means the error-boundary message, which sets text-align:center as an inline style, still centres. ------------------------------------------------------------------ */ #chatbox-widget-root, #chatbox-widget-root * { text-align: left; text-justify: auto; } /* ------------------------------------------------------------------ Tablet and small laptop ------------------------------------------------------------------ */ @media (max-width: 1024px) { .cw-window { width: 330px !important; } } /* ------------------------------------------------------------------ Tablet portrait / large phone — tighten to the edge to reclaim space ------------------------------------------------------------------ */ @media (max-width: 782px) { .cw-bubble, .cw-window, .cw-launcher-menu, .cw-promo { left: 16px !important; } .cw-bubble { bottom: 18px !important; } .cw-window { bottom: 86px !important; } .cw-launcher-menu { bottom: 84px !important; } .cw-promo { bottom: 86px !important; } } /* ------------------------------------------------------------------ Mobile — the window must never exceed the viewport, and the promo card must not crowd the bubble or run off-screen ------------------------------------------------------------------ */ @media (max-width: 480px) { .cw-window { width: calc(100vw - 32px) !important; max-width: 360px !important; height: 440px !important; max-height: calc(100vh - 150px) !important; } .cw-promo { max-width: calc(100vw - 90px) !important; } } /* ------------------------------------------------------------------ Short viewports (landscape phones) — keep the window fully on screen ------------------------------------------------------------------ */ @media (max-height: 600px) { .cw-window { height: calc(100vh - 120px) !important; min-height: 240px !important; } }