PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.25
MxChat – AI Chatbot & Content Generation for WordPress v3.2.25
3.2.25 3.2.24 3.2.23 3.2.22 3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 All 156 releases
← All changes | css/chat-style.css +257 -34 3.2.11 → 3.2.25 View file →
@@ -1,4 +1,45 @@
1 +/* ============================================================
2 + DEFENSIVE BASELINE (v3.2.15, plan-52fd4c)
3 + The widget renders in the host page DOM with no isolation layer,
4 + so host-theme CSS bleeds into it. This block is a scoped floor:
5 + (1) border-box everywhere inside the widget (themes that set
6 + *{box-sizing:content-box} otherwise break every fixed-size element);
7 + (2) a specificity-0 reset via :where() of exactly the properties
8 + themes commonly weaponize on form/button elements. :where() keeps
9 + specificity at zero, so every later widget rule AND any customer
10 + custom CSS still wins unchanged — the reset only fills gaps where
11 + we currently set nothing. Scoped: nothing here can leak onto the
12 + host page. Deliberately NOT Shadow DOM / @layer / !important.
13 + ============================================================ */
14 +.mxchat-chatbot-wrapper,
15 +.mxchat-chatbot-wrapper *,
16 +.mxchat-chatbot-wrapper *::before,
17 +.mxchat-chatbot-wrapper *::after,
18 +.floating-chatbot,
19 +.floating-chatbot *,
20 +.floating-chatbot *::before,
21 +.floating-chatbot *::after {
22 + box-sizing: border-box;
23 +}
24 +
25 +.mxchat-chatbot-wrapper :where(button, input, select, textarea) {
26 + font-family: inherit;
27 + font-size: inherit;
28 + line-height: inherit;
29 + margin: 0;
30 + text-transform: none;
31 + letter-spacing: normal;
32 + min-height: 0;
33 + max-width: none;
34 + background-image: none;
35 + text-shadow: none;
36 + float: none;
37 +}
38 +.mxchat-chatbot-wrapper :where(button) {
39 + width: auto;
40 +}
41 +
1 42 /* ========================================
2 43 NOTIFICATION SYSTEM
3 44 ======================================== */
4 45 .chat-notification-badge {
@@ -28,21 +69,41 @@
28 69 .email-blocker {
29 70 display: flex;
30 71 flex-direction: column;
31 72 align-items: center;
32 - justify-content: center;
73 + /* No justify-content: center here — on an overflowing flex container it
74 + pushes content past BOTH edges, making the top unreachable by scroll.
75 + The auto margins on the first/last children below center the content
76 + when there is room and collapse to flex-start when there is not. */
33 77 border-radius: 12px;
34 78 padding: 30px 20px;
35 79 max-width: 100%;
80 + max-height: 100%;
81 + overflow-y: auto;
82 + scrollbar-width: thin;
36 83 margin: auto;
37 84 text-align: center;
38 85 animation: fadeIn 0.5s ease-in-out;
39 86 }
40 87
88 +.email-blocker::-webkit-scrollbar {
89 + width: 5px;
90 +}
91 +
92 +.email-blocker::-webkit-scrollbar-thumb {
93 + background-color: #212121;
94 + border-radius: 20px;
95 +}
96 +
41 97 .email-blocker-header {
98 + margin-top: auto;
42 99 margin-bottom: 20px;
43 100 }
44 101
102 +.email-blocker .email-collection-form {
103 + margin-bottom: auto;
104 +}
105 +
45 106 .email-blocker-logo {
46 107 max-width: 80px;
47 108 margin-bottom: 10px;
48 109 }
@@ -79,8 +140,40 @@
79 140 box-shadow: 0 0 8px rgba(0, 115, 170, 0.3);
80 141 outline: none;
81 142 }
82 143
144 +/* Consent checkbox row (b062c4). Left-aligned inside the centered form so a
145 + multi-line label reads naturally; sized to stay compact on 320-390px. */
146 +.email-blocker .mxchat-consent-row {
147 + display: flex;
148 + align-items: flex-start;
149 + gap: 8px;
150 + width: 100%;
151 + margin-bottom: 15px;
152 + text-align: left;
153 +}
154 +
155 +.email-blocker .mxchat-consent-checkbox {
156 + flex-shrink: 0;
157 + width: 16px;
158 + height: 16px;
159 + margin: 2px 0 0;
160 + accent-color: #0073aa;
161 + cursor: pointer;
162 +}
163 +
164 +.email-blocker .mxchat-consent-label {
165 + font-size: 13px;
166 + line-height: 1.45;
167 + color: #555555;
168 + cursor: pointer;
169 +}
170 +
171 +.email-blocker .mxchat-consent-label a {
172 + color: #0073aa;
173 + text-decoration: underline;
174 +}
175 +
83 176 .email-blocker button {
84 177 background-color: #0073aa;
85 178 color: #ffffff;
86 179 padding: 12px 20px;
@@ -555,9 +648,8 @@
555 648 .mxchat-popular-questions.collapsed .questions-collapse-btn {
556 649 display: none;
557 650 }
558 651
559 -/* MISSING - These need to be inside the container context: */
560 652 .mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn {
561 653 background: none;
562 654 border: none;
563 655 padding: 0;
@@ -590,8 +682,9 @@
590 682 box-shadow: none;
591 683 outline: none;
592 684 align-self: center; /* Center in flex container */
593 685 order: -1; /* Make sure it appears first */
686 + flex-shrink: 0; /* same flex auto-minimum caveat as .mxchat-popular-question */
594 687 }
595 688
596 689 .questions-toggle-btn:hover,
597 690 .questions-collapse-btn:hover,
@@ -641,8 +734,13 @@
641 734 text-align: initial;
642 735 transition: all 0.3s ease;
643 736 margin-bottom: 0;
644 737 box-shadow: none;
738 + /* The defensive baseline's min-height:0 on :where(button) removes the
739 + flex automatic minimum size, so without this the column-flex scroll
740 + container compresses all questions to fit 200px and the scrollbox
741 + never appears (plan d51560). */
742 + flex-shrink: 0;
645 743 }
646 744
647 745 .mxchat-popular-question:hover {
648 746 background-color: #eaeaea;
@@ -685,9 +783,13 @@
685 783
686 784 /* ========================================
687 785 CORE CHATBOT UI
688 786 ======================================== */
689 -.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 {
690 792 display: none;
691 793 opacity: 0;
692 794 pointer-events: none;
693 795 }
@@ -1106,9 +1208,12 @@
1106 1208
1107 1209 .chatbot-top-bar button.exit-chat:hover {
1108 1210 background: rgba(255, 255, 255, 0.12);
1109 1211 }
1110 -.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 {
1111 1216 display: flex;
1112 1217 }
1113 1218
1114 1219 .floating-chatbot-button {
@@ -1148,8 +1253,11 @@
1148 1253 }
1149 1254
1150 1255 .mxchat-chatbot-wrapper .chatbot-top-bar button.exit-chat {
1151 1256 background: transparent;
1257 + /* v3.2.15 (plan-52fd4c): explicit guards against host-theme button rules.
1258 + Margin deliberately untouched — .exit-chat relies on margin-left:auto. */
1259 + background-image: none;
1152 1260 border: none;
1153 1261 opacity: 0.8;
1154 1262 padding: 0;
1155 1263 width: 32px;
@@ -1154,10 +1262,17 @@
1154 1262 padding: 0;
1155 1263 width: 32px;
1156 1264 height: 32px;
1157 1265 min-width: 32px;
1266 + min-height: 32px;
1267 + max-width: none;
1158 1268 flex: 0 0 auto;
1159 1269 border-radius: 6px;
1270 + font-family: inherit;
1271 + text-transform: none;
1272 + text-shadow: none;
1273 + appearance: none;
1274 + -webkit-appearance: none;
1160 1275 transition: opacity 0.15s ease, background 0.15s ease;
1161 1276 }
1162 1277
1163 1278 .mxchat-chatbot-wrapper .chatbot-top-bar {
@@ -1495,9 +1610,12 @@
1495 1610 }
1496 1611
1497 1612
1498 1613
1499 -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 {
1500 1618 background-color: #000;
1501 1619 border: 1px solid #ddd;
1502 1620 border-radius: 20px;
1503 1621 border-left: 3px solid #9e7aff;
@@ -1513,25 +1631,8 @@
1513 1631 display: block;
1514 1632 word-wrap: break-word;
1515 1633 }
1516 1634
1517 -.copy-btn {
1518 - padding: 10px 20px;
1519 - border: none;
1520 - border-radius: 4px;
1521 - background-color: #9e7aff;
1522 - transition: background-color 0.3s;
1523 - color: #fff;
1524 - font-size: 1rem;
1525 - cursor: pointer;
1526 - font-weight: 700;
1527 - margin-bottom: 10px;
1528 -}
1529 -
1530 -.copy-btn:hover {
1531 - opacity: 0.8;
1532 -}
1533 -
1534 1635 .mxchat-product-card {
1535 1636 display: flex;
1536 1637 flex-direction: column;
1537 1638 align-items: center;
@@ -1626,8 +1727,106 @@
1626 1727 height: auto;
1627 1728 border-radius: 0 0 8px 8px;
1628 1729 }
1629 1730
1731 +/* Consent-safe YouTube embed (click-to-load facade → nocookie iframe).
1732 + Caption colors INHERIT from the message bubble (same idiom as
1733 + .mxchat-product-card) so the embed reads correctly on any widget theme —
1734 + bot bubbles commonly force their own text color. */
1735 +.mxchat-youtube-embed {
1736 + max-width: 340px;
1737 + margin-top: 8px;
1738 +}
1739 +
1740 +.mxchat-youtube-facade {
1741 + position: relative;
1742 + display: block;
1743 + width: 100%;
1744 + padding: 0;
1745 + margin: 0;
1746 + border: none;
1747 + background: #000;
1748 + cursor: pointer;
1749 + aspect-ratio: 16 / 9;
1750 + border-radius: 10px;
1751 + overflow: hidden;
1752 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
1753 +}
1754 +
1755 +.mxchat-youtube-thumb {
1756 + width: 100%;
1757 + height: 100%;
1758 + object-fit: cover;
1759 + display: block;
1760 + opacity: 0.92;
1761 + transition: opacity 0.2s;
1762 +}
1763 +
1764 +.mxchat-youtube-facade:hover .mxchat-youtube-thumb {
1765 + opacity: 1;
1766 +}
1767 +
1768 +.mxchat-youtube-play {
1769 + position: absolute;
1770 + top: 50%;
1771 + left: 50%;
1772 + transform: translate(-50%, -50%);
1773 + display: flex;
1774 + align-items: center;
1775 + justify-content: center;
1776 + width: 52px;
1777 + height: 52px;
1778 + border-radius: 50%;
1779 + background: rgba(0, 0, 0, 0.72);
1780 + color: #fff;
1781 + transition: transform 0.2s, background 0.2s;
1782 +}
1783 +
1784 +.mxchat-youtube-play svg {
1785 + margin-left: 3px;
1786 +}
1787 +
1788 +.mxchat-youtube-facade:hover .mxchat-youtube-play {
1789 + transform: translate(-50%, -50%) scale(1.08);
1790 + background: rgba(0, 0, 0, 0.85);
1791 +}
1792 +
1793 +.mxchat-youtube-iframe {
1794 + width: 100%;
1795 + aspect-ratio: 16 / 9;
1796 + border: none;
1797 + display: block;
1798 + border-radius: 10px;
1799 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
1800 +}
1801 +
1802 +.mxchat-youtube-caption {
1803 + display: flex;
1804 + align-items: baseline;
1805 + justify-content: space-between;
1806 + gap: 10px;
1807 + padding: 8px 2px 0;
1808 + background: transparent;
1809 + color: inherit;
1810 +}
1811 +
1812 +.mxchat-youtube-title {
1813 + font-size: 13px;
1814 + font-weight: 600;
1815 + color: inherit;
1816 + overflow: hidden;
1817 + white-space: nowrap;
1818 + text-overflow: ellipsis;
1819 +}
1820 +
1821 +.mxchat-youtube-link {
1822 + font-size: 12px;
1823 + white-space: nowrap;
1824 + color: inherit;
1825 + opacity: 0.85;
1826 + text-decoration: underline;
1827 +}
1828 +
1630 1829 #widget_icon, #widget_icon_2, #widget_icon_3, #widget_icon_5, #widget_icon_4, #widget_icon_6, #widget_icon_7 {
1631 1830 padding: 10px;
1632 1831 }
1633 1832
@@ -1727,18 +1926,29 @@
1727 1926 background: rgba(255, 255, 255, 0.12);
1728 1927 opacity: 1;
1729 1928 outline: none;
1730 1929 }
1731 -.mxchat-header-btn {
1930 +/* v3.2.15 (plan-52fd4c): kebab rules scoped under the wrapper + explicit
1931 + guards on every property a theme's button/link rules commonly set
1932 + (font-family, margin, appearance, text-transform, background-image),
1933 + after a customer site's theme visibly mangled the dropdown. */
1934 +.mxchat-chatbot-wrapper .mxchat-header-btn {
1732 1935 border: none;
1733 1936 background: transparent;
1937 + background-image: none;
1734 1938 cursor: pointer;
1735 1939 display: inline-flex;
1736 1940 align-items: center;
1737 1941 justify-content: center;
1738 1942 padding: 0;
1943 + margin: 0;
1739 1944 opacity: 0.8;
1740 1945 color: #fff;
1946 + font-family: inherit;
1947 + text-transform: none;
1948 + text-shadow: none;
1949 + appearance: none;
1950 + -webkit-appearance: none;
1741 1951 transition: opacity 0.15s ease, background 0.15s ease;
1742 1952 border-radius: 6px;
1743 1953 line-height: 0;
1744 1954 width: 32px;
@@ -1743,30 +1953,33 @@
1743 1953 line-height: 0;
1744 1954 width: 32px;
1745 1955 height: 32px;
1746 1956 min-width: 32px;
1957 + min-height: 32px;
1958 + max-width: none;
1747 1959 flex: 0 0 auto;
1748 1960 }
1749 -.mxchat-header-btn:hover,
1750 -.mxchat-header-btn:focus {
1961 +.mxchat-chatbot-wrapper .mxchat-header-btn:hover,
1962 +.mxchat-chatbot-wrapper .mxchat-header-btn:focus {
1751 1963 opacity: 1;
1752 1964 background: rgba(255, 255, 255, 0.12);
1753 1965 outline: none;
1754 1966 }
1755 -.mxchat-header-btn[aria-expanded="true"] {
1967 +.mxchat-chatbot-wrapper .mxchat-header-btn[aria-expanded="true"] {
1756 1968 opacity: 1;
1757 1969 background: rgba(255, 255, 255, 0.12);
1758 1970 }
1759 -.mxchat-menu-trigger svg {
1971 +.mxchat-chatbot-wrapper .mxchat-menu-trigger svg {
1760 1972 width: 18px;
1761 1973 height: 18px;
1762 1974 }
1763 1975
1764 -.mxchat-header-menu {
1976 +.mxchat-chatbot-wrapper .mxchat-header-menu {
1765 1977 position: absolute;
1766 1978 top: calc(100% + 6px);
1767 1979 right: 0;
1768 1980 min-width: 220px;
1981 + margin: 0;
1769 1982 background: var(--mxchat-menu-bg, #ffffff);
1770 1983 color: var(--mxchat-menu-fg, #1a1a1a);
1771 1984 border: 1px solid rgba(127, 127, 127, 0.20);
1772 1985 border-radius: 10px;
@@ -1771,35 +1984,45 @@
1771 1984 border: 1px solid rgba(127, 127, 127, 0.20);
1772 1985 border-radius: 10px;
1773 1986 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
1774 1987 padding: 4px;
1775 - z-index: 5;
1988 + font-family: inherit;
1989 + z-index: 99;
1776 1990 opacity: 0;
1777 1991 transform: translateY(-4px);
1778 1992 pointer-events: none;
1779 1993 transition: opacity 0.12s ease, transform 0.12s ease;
1780 1994 }
1781 -.mxchat-header-menu.is-open {
1995 +.mxchat-chatbot-wrapper .mxchat-header-menu.is-open {
1782 1996 opacity: 1;
1783 1997 transform: translateY(0);
1784 1998 pointer-events: auto;
1785 1999 }
1786 -.mxchat-header-menu[hidden] {
2000 +.mxchat-chatbot-wrapper .mxchat-header-menu[hidden] {
1787 2001 display: none;
1788 2002 }
1789 -.mxchat-menu-item {
2003 +.mxchat-chatbot-wrapper .mxchat-menu-item {
1790 2004 display: flex;
1791 2005 align-items: center;
1792 2006 gap: 10px;
1793 2007 width: 100%;
1794 2008 padding: 8px 12px;
2009 + margin: 0;
1795 2010 min-height: 40px;
1796 2011 border: none;
1797 2012 background: transparent;
2013 + background-image: none;
1798 2014 color: inherit;
2015 + font-family: inherit;
1799 2016 font-size: 14px;
1800 2017 line-height: 1.3;
2018 + letter-spacing: normal;
1801 2019 text-align: left;
2020 + text-transform: none;
2021 + text-shadow: none;
2022 + white-space: nowrap;
2023 + appearance: none;
2024 + -webkit-appearance: none;
1802 2025 cursor: pointer;
1803 2026 border-radius: 6px;
1804 2027 transition: background 0.12s ease;
1805 2028 text-decoration: none;
@@ -1804,10 +2027,10 @@
1804 2027 transition: background 0.12s ease;
1805 2028 text-decoration: none;
1806 2029 box-sizing: border-box;
1807 2030 }
1808 -.mxchat-menu-item:hover,
1809 -.mxchat-menu-item:focus {
2031 +.mxchat-chatbot-wrapper .mxchat-menu-item:hover,
2032 +.mxchat-chatbot-wrapper .mxchat-menu-item:focus {
1810 2033 background: rgba(127, 127, 127, 0.18);
1811 2034 outline: none;
1812 2035 }
1813 2036 .mxchat-menu-item-icon {