PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.23
MxChat – AI Chatbot & Content Generation for WordPress v3.2.23
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 +308 -14 3.2.9 → 3.2.23 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;
@@ -886,8 +984,72 @@
886 984 scrollbar-width: thin;
887 985 scrollbar-color: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1) #f1f1f1;
888 986 }
889 987
988 +/* Chat input character counter + soft limit feedback (plan 7091a2).
989 + Language-neutral: numbers + color only. Hidden until ~80% of the cap, then
990 + fades in and ramps neutral -> amber -> red. The input border mirrors the same
991 + cue, and an over-limit keystroke/paste triggers a brief shake so the hard
992 + maxlength cap (plan a3fae2) is never a silent "input jumps back". */
993 +.mxchat-chatbot .chat-container .input-container .mxchat-char-counter {
994 + position: absolute;
995 + bottom: 3px;
996 + right: 44px; /* clear the absolutely-positioned send button */
997 + font-size: 11px;
998 + line-height: 1;
999 + font-variant-numeric: tabular-nums;
1000 + color: #9aa0a6;
1001 + background: rgba(255, 255, 255, 0.85);
1002 + padding: 1px 5px;
1003 + border-radius: 8px;
1004 + pointer-events: none;
1005 + opacity: 0;
1006 + visibility: hidden;
1007 + transition: opacity 0.18s ease, color 0.18s ease;
1008 + z-index: 2;
1009 +}
1010 +.mxchat-chatbot .chat-container .input-container .mxchat-char-counter.is-visible {
1011 + opacity: 1;
1012 + visibility: visible;
1013 +}
1014 +.mxchat-chatbot .chat-container .input-container .mxchat-char-counter.is-warn {
1015 + color: #d98300; /* amber: approaching the cap */
1016 +}
1017 +.mxchat-chatbot .chat-container .input-container .mxchat-char-counter.is-full {
1018 + color: #d93025; /* red: at the cap */
1019 + font-weight: 600;
1020 +}
1021 +/* RTL widgets: counter on the opposite side. */
1022 +.mxchat-chatbot[dir="rtl"] .chat-container .input-container .mxchat-char-counter,
1023 +[dir="rtl"] .mxchat-chatbot .chat-container .input-container .mxchat-char-counter {
1024 + right: auto;
1025 + left: 44px;
1026 +}
1027 +/* Input border affordance mirrors the counter color. */
1028 +.mxchat-chatbot .chat-container .input-container.mxchat-input-near-limit {
1029 + border-color: #f0b048;
1030 +}
1031 +.mxchat-chatbot .chat-container .input-container.mxchat-input-at-limit {
1032 + border-color: #e5675c;
1033 +}
1034 +/* Soft "you hit the edge" bump when an over-limit keystroke/paste is rejected. */
1035 +.mxchat-chatbot .chat-container .input-container.mxchat-input-bump {
1036 + animation: mxchat-input-bump 0.2s ease;
1037 +}
1038 +@keyframes mxchat-input-bump {
1039 + 0% { transform: translateX(0); }
1040 + 25% { transform: translateX(-3px); }
1041 + 50% { transform: translateX(3px); }
1042 + 75% { transform: translateX(-2px); }
1043 + 100% { transform: translateX(0); }
1044 +}
1045 +/* Respect reduced-motion: drop the shake; the red border/counter still signals the cap. */
1046 +@media (prefers-reduced-motion: reduce) {
1047 + .mxchat-chatbot .chat-container .input-container.mxchat-input-bump {
1048 + animation: none;
1049 + }
1050 +}
1051 +
890 1052 .mxchat-chatbot .chat-container .input-container .send-button {
891 1053 position: absolute;
892 1054 right: 10px;
893 1055 top: 50%;
@@ -1084,8 +1246,11 @@
1084 1246 }
1085 1247
1086 1248 .mxchat-chatbot-wrapper .chatbot-top-bar button.exit-chat {
1087 1249 background: transparent;
1250 + /* v3.2.15 (plan-52fd4c): explicit guards against host-theme button rules.
1251 + Margin deliberately untouched — .exit-chat relies on margin-left:auto. */
1252 + background-image: none;
1088 1253 border: none;
1089 1254 opacity: 0.8;
1090 1255 padding: 0;
1091 1256 width: 32px;
@@ -1090,10 +1255,17 @@
1090 1255 padding: 0;
1091 1256 width: 32px;
1092 1257 height: 32px;
1093 1258 min-width: 32px;
1259 + min-height: 32px;
1260 + max-width: none;
1094 1261 flex: 0 0 auto;
1095 1262 border-radius: 6px;
1263 + font-family: inherit;
1264 + text-transform: none;
1265 + text-shadow: none;
1266 + appearance: none;
1267 + -webkit-appearance: none;
1096 1268 transition: opacity 0.15s ease, background 0.15s ease;
1097 1269 }
1098 1270
1099 1271 .mxchat-chatbot-wrapper .chatbot-top-bar {
@@ -1562,8 +1734,106 @@
1562 1734 height: auto;
1563 1735 border-radius: 0 0 8px 8px;
1564 1736 }
1565 1737
1738 +/* Consent-safe YouTube embed (click-to-load facade → nocookie iframe).
1739 + Caption colors INHERIT from the message bubble (same idiom as
1740 + .mxchat-product-card) so the embed reads correctly on any widget theme —
1741 + bot bubbles commonly force their own text color. */
1742 +.mxchat-youtube-embed {
1743 + max-width: 340px;
1744 + margin-top: 8px;
1745 +}
1746 +
1747 +.mxchat-youtube-facade {
1748 + position: relative;
1749 + display: block;
1750 + width: 100%;
1751 + padding: 0;
1752 + margin: 0;
1753 + border: none;
1754 + background: #000;
1755 + cursor: pointer;
1756 + aspect-ratio: 16 / 9;
1757 + border-radius: 10px;
1758 + overflow: hidden;
1759 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
1760 +}
1761 +
1762 +.mxchat-youtube-thumb {
1763 + width: 100%;
1764 + height: 100%;
1765 + object-fit: cover;
1766 + display: block;
1767 + opacity: 0.92;
1768 + transition: opacity 0.2s;
1769 +}
1770 +
1771 +.mxchat-youtube-facade:hover .mxchat-youtube-thumb {
1772 + opacity: 1;
1773 +}
1774 +
1775 +.mxchat-youtube-play {
1776 + position: absolute;
1777 + top: 50%;
1778 + left: 50%;
1779 + transform: translate(-50%, -50%);
1780 + display: flex;
1781 + align-items: center;
1782 + justify-content: center;
1783 + width: 52px;
1784 + height: 52px;
1785 + border-radius: 50%;
1786 + background: rgba(0, 0, 0, 0.72);
1787 + color: #fff;
1788 + transition: transform 0.2s, background 0.2s;
1789 +}
1790 +
1791 +.mxchat-youtube-play svg {
1792 + margin-left: 3px;
1793 +}
1794 +
1795 +.mxchat-youtube-facade:hover .mxchat-youtube-play {
1796 + transform: translate(-50%, -50%) scale(1.08);
1797 + background: rgba(0, 0, 0, 0.85);
1798 +}
1799 +
1800 +.mxchat-youtube-iframe {
1801 + width: 100%;
1802 + aspect-ratio: 16 / 9;
1803 + border: none;
1804 + display: block;
1805 + border-radius: 10px;
1806 + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
1807 +}
1808 +
1809 +.mxchat-youtube-caption {
1810 + display: flex;
1811 + align-items: baseline;
1812 + justify-content: space-between;
1813 + gap: 10px;
1814 + padding: 8px 2px 0;
1815 + background: transparent;
1816 + color: inherit;
1817 +}
1818 +
1819 +.mxchat-youtube-title {
1820 + font-size: 13px;
1821 + font-weight: 600;
1822 + color: inherit;
1823 + overflow: hidden;
1824 + white-space: nowrap;
1825 + text-overflow: ellipsis;
1826 +}
1827 +
1828 +.mxchat-youtube-link {
1829 + font-size: 12px;
1830 + white-space: nowrap;
1831 + color: inherit;
1832 + opacity: 0.85;
1833 + text-decoration: underline;
1834 +}
1835 +
1566 1836 #widget_icon, #widget_icon_2, #widget_icon_3, #widget_icon_5, #widget_icon_4, #widget_icon_6, #widget_icon_7 {
1567 1837 padding: 10px;
1568 1838 }
1569 1839
@@ -1663,18 +1933,29 @@
1663 1933 background: rgba(255, 255, 255, 0.12);
1664 1934 opacity: 1;
1665 1935 outline: none;
1666 1936 }
1667 -.mxchat-header-btn {
1937 +/* v3.2.15 (plan-52fd4c): kebab rules scoped under the wrapper + explicit
1938 + guards on every property a theme's button/link rules commonly set
1939 + (font-family, margin, appearance, text-transform, background-image),
1940 + after a customer site's theme visibly mangled the dropdown. */
1941 +.mxchat-chatbot-wrapper .mxchat-header-btn {
1668 1942 border: none;
1669 1943 background: transparent;
1944 + background-image: none;
1670 1945 cursor: pointer;
1671 1946 display: inline-flex;
1672 1947 align-items: center;
1673 1948 justify-content: center;
1674 1949 padding: 0;
1950 + margin: 0;
1675 1951 opacity: 0.8;
1676 1952 color: #fff;
1953 + font-family: inherit;
1954 + text-transform: none;
1955 + text-shadow: none;
1956 + appearance: none;
1957 + -webkit-appearance: none;
1677 1958 transition: opacity 0.15s ease, background 0.15s ease;
1678 1959 border-radius: 6px;
1679 1960 line-height: 0;
1680 1961 width: 32px;
@@ -1679,30 +1960,33 @@
1679 1960 line-height: 0;
1680 1961 width: 32px;
1681 1962 height: 32px;
1682 1963 min-width: 32px;
1964 + min-height: 32px;
1965 + max-width: none;
1683 1966 flex: 0 0 auto;
1684 1967 }
1685 -.mxchat-header-btn:hover,
1686 -.mxchat-header-btn:focus {
1968 +.mxchat-chatbot-wrapper .mxchat-header-btn:hover,
1969 +.mxchat-chatbot-wrapper .mxchat-header-btn:focus {
1687 1970 opacity: 1;
1688 1971 background: rgba(255, 255, 255, 0.12);
1689 1972 outline: none;
1690 1973 }
1691 -.mxchat-header-btn[aria-expanded="true"] {
1974 +.mxchat-chatbot-wrapper .mxchat-header-btn[aria-expanded="true"] {
1692 1975 opacity: 1;
1693 1976 background: rgba(255, 255, 255, 0.12);
1694 1977 }
1695 -.mxchat-menu-trigger svg {
1978 +.mxchat-chatbot-wrapper .mxchat-menu-trigger svg {
1696 1979 width: 18px;
1697 1980 height: 18px;
1698 1981 }
1699 1982
1700 -.mxchat-header-menu {
1983 +.mxchat-chatbot-wrapper .mxchat-header-menu {
1701 1984 position: absolute;
1702 1985 top: calc(100% + 6px);
1703 1986 right: 0;
1704 1987 min-width: 220px;
1988 + margin: 0;
1705 1989 background: var(--mxchat-menu-bg, #ffffff);
1706 1990 color: var(--mxchat-menu-fg, #1a1a1a);
1707 1991 border: 1px solid rgba(127, 127, 127, 0.20);
1708 1992 border-radius: 10px;
@@ -1707,35 +1991,45 @@
1707 1991 border: 1px solid rgba(127, 127, 127, 0.20);
1708 1992 border-radius: 10px;
1709 1993 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
1710 1994 padding: 4px;
1711 - z-index: 5;
1995 + font-family: inherit;
1996 + z-index: 99;
1712 1997 opacity: 0;
1713 1998 transform: translateY(-4px);
1714 1999 pointer-events: none;
1715 2000 transition: opacity 0.12s ease, transform 0.12s ease;
1716 2001 }
1717 -.mxchat-header-menu.is-open {
2002 +.mxchat-chatbot-wrapper .mxchat-header-menu.is-open {
1718 2003 opacity: 1;
1719 2004 transform: translateY(0);
1720 2005 pointer-events: auto;
1721 2006 }
1722 -.mxchat-header-menu[hidden] {
2007 +.mxchat-chatbot-wrapper .mxchat-header-menu[hidden] {
1723 2008 display: none;
1724 2009 }
1725 -.mxchat-menu-item {
2010 +.mxchat-chatbot-wrapper .mxchat-menu-item {
1726 2011 display: flex;
1727 2012 align-items: center;
1728 2013 gap: 10px;
1729 2014 width: 100%;
1730 2015 padding: 8px 12px;
2016 + margin: 0;
1731 2017 min-height: 40px;
1732 2018 border: none;
1733 2019 background: transparent;
2020 + background-image: none;
1734 2021 color: inherit;
2022 + font-family: inherit;
1735 2023 font-size: 14px;
1736 2024 line-height: 1.3;
2025 + letter-spacing: normal;
1737 2026 text-align: left;
2027 + text-transform: none;
2028 + text-shadow: none;
2029 + white-space: nowrap;
2030 + appearance: none;
2031 + -webkit-appearance: none;
1738 2032 cursor: pointer;
1739 2033 border-radius: 6px;
1740 2034 transition: background 0.12s ease;
1741 2035 text-decoration: none;
@@ -1740,10 +2034,10 @@
1740 2034 transition: background 0.12s ease;
1741 2035 text-decoration: none;
1742 2036 box-sizing: border-box;
1743 2037 }
1744 -.mxchat-menu-item:hover,
1745 -.mxchat-menu-item:focus {
2038 +.mxchat-chatbot-wrapper .mxchat-menu-item:hover,
2039 +.mxchat-chatbot-wrapper .mxchat-menu-item:focus {
1746 2040 background: rgba(127, 127, 127, 0.18);
1747 2041 outline: none;
1748 2042 }
1749 2043 .mxchat-menu-item-icon {