/* embed.css — overrides for the standalone case-study embed. Loaded AFTER styles.css and chatbot-embed.html's inline preview styles, only by chatbot-embed.html. Do not edit styles.css — this keeps index.html's live floating-widget behavior untouched. Approach: the widget keeps its native 390x844 mobile-first layout (nothing reflows or rewraps) and is uniformly scaled down to fit whatever frame size the embed sits in, like a shrunk mockup rather than a responsively resized layout. Scale factor is computed in JS (see the inline script in chatbot-embed.html) and written to --embed-scale on . */ html, body { height: 100%; margin: 0; overflow: hidden; } /* Targets both .chat-widget and .chat-widget.is-open so these declarations match or exceed the specificity of every competing .chat-widget(.is-open) rule in styles.css — otherwise styles.css's 2-class .chat-widget.is-open rule (transform: translateY(0)) wins over a plain 1-class rule here regardless of load order. */ .chat-widget, .chat-widget.is-open { position: relative; width: 390px; height: 844px; top: auto; bottom: auto; right: auto; left: auto; z-index: auto; opacity: 1; pointer-events: auto; flex-shrink: 0; /* stop the flex parent from squishing the layout box narrower than the container instead of letting transform scale it */ transform: scale(var(--embed-scale, 1)); transform-origin: center center; } .chat-launcher { display: none; }