| @@ -783,9 +783,13 @@ | ||
| 783 | 783 | |
| 784 | 784 | /* ======================================== |
| 785 | 785 | CORE CHATBOT UI |
| 786 | 786 | ======================================== */ |
| 787 | -.invisible { | |
| 787 | +/* This stylesheet loads on every page where the widget shows, so generic class names must | |
| 788 | + stay inside MxChat's own containers: a bare .invisible hit the site's own elements (and | |
| 789 | + Bootstrap / Tailwind give that class the opposite meaning, visibility hidden with the layout | |
| 790 | + kept). :where() keeps the specificity of the bare class. */ | |
| 791 | +:where(.floating-chatbot, .mxchat-chatbot-wrapper) .invisible { | |
| 788 | 792 | display: none; |
| 789 | 793 | opacity: 0; |
| 790 | 794 | pointer-events: none; |
| 791 | 795 | } |
| @@ -1204,9 +1208,12 @@ | ||
| 1204 | 1208 | |
| 1205 | 1209 | .chatbot-top-bar button.exit-chat:hover { |
| 1206 | 1210 | background: rgba(255, 255, 255, 0.12); |
| 1207 | 1211 | } |
| 1208 | -.visible { | |
| 1212 | +/* The floating window is the only element MxChat toggles .visible on (core, the Trigger | |
| 1213 | + and Multi-Bot add-ons and MxChat Anywhere all use .floating-chatbot). Unscoped, this turned | |
| 1214 | + any site element with class "visible" into a flex container. */ | |
| 1215 | +:where(.floating-chatbot).visible { | |
| 1209 | 1216 | display: flex; |
| 1210 | 1217 | } |
| 1211 | 1218 | |
| 1212 | 1219 | .floating-chatbot-button { |
| @@ -1603,9 +1610,12 @@ | ||
| 1603 | 1610 | } |
| 1604 | 1611 | |
| 1605 | 1612 | |
| 1606 | 1613 | |
| 1607 | -pre { | |
| 1614 | +/* Code blocks inside the chat only (a bare pre turned every code sample on the site black with | |
| 1615 | + white text). :where() keeps the specificity of the bare element selector, so .mxchat-code-block | |
| 1616 | + still wins where it sets a property and the look inside the chat is unchanged. */ | |
| 1617 | +:where(.mxchat-chatbot-wrapper) pre { | |
| 1608 | 1618 | background-color: #000; |
| 1609 | 1619 | border: 1px solid #ddd; |
| 1610 | 1620 | border-radius: 20px; |
| 1611 | 1621 | border-left: 3px solid #9e7aff; |
| @@ -1619,25 +1629,8 @@ | ||
| 1619 | 1629 | overflow: auto; |
| 1620 | 1630 | padding: 1em 1.5em; |
| 1621 | 1631 | display: block; |
| 1622 | 1632 | word-wrap: break-word; |
| 1623 | -} | |
| 1624 | - | |
| 1625 | -.copy-btn { | |
| 1626 | - padding: 10px 20px; | |
| 1627 | - border: none; | |
| 1628 | - border-radius: 4px; | |
| 1629 | - background-color: #9e7aff; | |
| 1630 | - transition: background-color 0.3s; | |
| 1631 | - color: #fff; | |
| 1632 | - font-size: 1rem; | |
| 1633 | - cursor: pointer; | |
| 1634 | - font-weight: 700; | |
| 1635 | - margin-bottom: 10px; | |
| 1636 | -} | |
| 1637 | - | |
| 1638 | -.copy-btn:hover { | |
| 1639 | - opacity: 0.8; | |
| 1640 | 1633 | } |
| 1641 | 1634 | |
| 1642 | 1635 | .mxchat-product-card { |
| 1643 | 1636 | display: flex; |
