/* ============================================================ Bridge_AIChat — Chat Widget Styles Full-height sidebar docked to the right edge of the viewport. ============================================================ */ :root { /* Default panel width. Overwritten at runtime as an inline custom property on by setupPanelResize() in chat-widget.js — both the panel and the page's push margin read from this one variable, so they can never drift apart while the curtain is being dragged. */ --aichat-panel-width: 380px; /* ── Tenant theme ──────────────────────────────────────── Every value below is overwritten at runtime by applyTenantTheme() in chat-widget.js from the tenant's Appearance settings (GET /tenants/{id}/theme/public). The defaults here MUST byte-match _DEFAULT_THEME_MAGENTO in ecom-chat-api/app/services/tenant_service.py. They paint the first frame, before the theme fetch resolves — and since the backend fills every unset field with exactly these values, a tenant who has never opened Appearance sees no swap at all. Drift between the two files shows up as a visible flicker on every page load, not as a broken build. */ --aichat-header-bg: #1979C3; --aichat-header-text: #FFFFFF; --aichat-launcher-bg: #1979C3; --aichat-msg-user-bg: #1979C3; --aichat-msg-user-text: #FFFFFF; --aichat-msg-bot-bg: #F0F0F0; --aichat-msg-bot-text: #333333; --aichat-input-bg: #FFFFFF; --aichat-input-border: #CCCCCC; --aichat-input-placeholder: #757575; --aichat-button-bg: #1979C3; --aichat-button-hover-bg: #006BB4; --aichat-footer-text: #757575; } /* ── Page push ─────────────────────────────────────────────── Instead of the panel overlaying the page, the page itself shifts left by the panel's width so nothing sits hidden behind the chat — the whole site stays visible, just shrunk over to make room on the right. Narrow viewports get no push at all: see the overlay breakpoint at the bottom of this file. ──────────────────────────────────────────────────────────── */ html.aichat-open, html.aichat-open body { overflow-x: hidden; } html.aichat-open .page-wrapper { margin-right: var(--aichat-panel-width); } .page-wrapper { transition: margin-right 0.3s cubic-bezier(0.32, 0.72, 0, 1); } /* ── Keyframes ───────────────────────────────────────────── */ @keyframes aichat-dot-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } } /* ── Launcher Button ─────────────────────────────────────── */ #bridge-aichat-launcher { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border: none; /* A