PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.2.8
MxChat – AI Chatbot & Content Generation for WordPress v3.2.8
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 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | css/chat-style.css +14 -315 3.2.213.2.8 View file →
@@ -1,45 +1,4 @@
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 -
42 1 /* ========================================
43 2 NOTIFICATION SYSTEM
44 3 ======================================== */
45 4 .chat-notification-badge {
@@ -69,41 +28,21 @@
69 28 .email-blocker {
70 29 display: flex;
71 30 flex-direction: column;
72 31 align-items: 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. */
32 + justify-content: center;
77 33 border-radius: 12px;
78 34 padding: 30px 20px;
79 35 max-width: 100%;
80 - max-height: 100%;
81 - overflow-y: auto;
82 - scrollbar-width: thin;
83 36 margin: auto;
84 37 text-align: center;
85 38 animation: fadeIn 0.5s ease-in-out;
86 39 }
87 40
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 -
97 41 .email-blocker-header {
98 - margin-top: auto;
99 42 margin-bottom: 20px;
100 43 }
101 44
102 -.email-blocker .email-collection-form {
103 - margin-bottom: auto;
104 -}
105 -
106 45 .email-blocker-logo {
107 46 max-width: 80px;
108 47 margin-bottom: 10px;
109 48 }
@@ -140,40 +79,8 @@
140 79 box-shadow: 0 0 8px rgba(0, 115, 170, 0.3);
141 80 outline: none;
142 81 }
143 82
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 -
176 83 .email-blocker button {
177 84 background-color: #0073aa;
178 85 color: #ffffff;
179 86 padding: 12px 20px;
@@ -648,8 +555,9 @@
648 555 .mxchat-popular-questions.collapsed .questions-collapse-btn {
649 556 display: none;
650 557 }
651 558
559 +/* MISSING - These need to be inside the container context: */
652 560 .mxchat-popular-questions .mxchat-popular-questions-container .questions-toggle-btn {
653 561 background: none;
654 562 border: none;
655 563 padding: 0;
@@ -682,9 +590,8 @@
682 590 box-shadow: none;
683 591 outline: none;
684 592 align-self: center; /* Center in flex container */
685 593 order: -1; /* Make sure it appears first */
686 - flex-shrink: 0; /* same flex auto-minimum caveat as .mxchat-popular-question */
687 594 }
688 595
689 596 .questions-toggle-btn:hover,
690 597 .questions-collapse-btn:hover,
@@ -734,13 +641,8 @@
734 641 text-align: initial;
735 642 transition: all 0.3s ease;
736 643 margin-bottom: 0;
737 644 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;
743 645 }
744 646
745 647 .mxchat-popular-question:hover {
746 648 background-color: #eaeaea;
@@ -984,72 +886,8 @@
984 886 scrollbar-width: thin;
985 887 scrollbar-color: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1) #f1f1f1;
986 888 }
987 889
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 -
1052 890 .mxchat-chatbot .chat-container .input-container .send-button {
1053 891 position: absolute;
1054 892 right: 10px;
1055 893 top: 50%;
@@ -1080,15 +918,8 @@
1080 918 .send-button:hover {
1081 919 opacity: 0.8;
1082 920 }
1083 921
1084 -/* Stop state while a response is streaming: the send button becomes a Stop
1085 - control in place — same chrome and position, swapped glyph. Themeable hook;
1086 - the glyph's size/color are mirrored from the send icon at runtime. */
1087 -.mxchat-chatbot .chat-container .input-container .send-button.mxchat-stop-mode {
1088 - cursor: pointer;
1089 -}
1090 -
1091 922 .mxchat-chatbot .spinner {
1092 923 animation: rotate 2s linear infinite;
1093 924 width: 20px;
1094 925 height: 20px;
@@ -1246,11 +1077,8 @@
1246 1077 }
1247 1078
1248 1079 .mxchat-chatbot-wrapper .chatbot-top-bar button.exit-chat {
1249 1080 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;
1253 1081 border: none;
1254 1082 opacity: 0.8;
1255 1083 padding: 0;
1256 1084 width: 32px;
@@ -1255,17 +1083,10 @@
1255 1083 padding: 0;
1256 1084 width: 32px;
1257 1085 height: 32px;
1258 1086 min-width: 32px;
1259 - min-height: 32px;
1260 - max-width: none;
1261 1087 flex: 0 0 auto;
1262 1088 border-radius: 6px;
1263 - font-family: inherit;
1264 - text-transform: none;
1265 - text-shadow: none;
1266 - appearance: none;
1267 - -webkit-appearance: none;
1268 1089 transition: opacity 0.15s ease, background 0.15s ease;
1269 1090 }
1270 1091
1271 1092 .mxchat-chatbot-wrapper .chatbot-top-bar {
@@ -1734,106 +1555,8 @@
1734 1555 height: auto;
1735 1556 border-radius: 0 0 8px 8px;
1736 1557 }
1737 1558
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 -
1836 1559 #widget_icon, #widget_icon_2, #widget_icon_3, #widget_icon_5, #widget_icon_4, #widget_icon_6, #widget_icon_7 {
1837 1560 padding: 10px;
1838 1561 }
1839 1562
@@ -1933,29 +1656,18 @@
1933 1656 background: rgba(255, 255, 255, 0.12);
1934 1657 opacity: 1;
1935 1658 outline: none;
1936 1659 }
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 {
1660 +.mxchat-header-btn {
1942 1661 border: none;
1943 1662 background: transparent;
1944 - background-image: none;
1945 1663 cursor: pointer;
1946 1664 display: inline-flex;
1947 1665 align-items: center;
1948 1666 justify-content: center;
1949 1667 padding: 0;
1950 - margin: 0;
1951 1668 opacity: 0.8;
1952 1669 color: #fff;
1953 - font-family: inherit;
1954 - text-transform: none;
1955 - text-shadow: none;
1956 - appearance: none;
1957 - -webkit-appearance: none;
1958 1670 transition: opacity 0.15s ease, background 0.15s ease;
1959 1671 border-radius: 6px;
1960 1672 line-height: 0;
1961 1673 width: 32px;
@@ -1960,33 +1672,30 @@
1960 1672 line-height: 0;
1961 1673 width: 32px;
1962 1674 height: 32px;
1963 1675 min-width: 32px;
1964 - min-height: 32px;
1965 - max-width: none;
1966 1676 flex: 0 0 auto;
1967 1677 }
1968 -.mxchat-chatbot-wrapper .mxchat-header-btn:hover,
1969 -.mxchat-chatbot-wrapper .mxchat-header-btn:focus {
1678 +.mxchat-header-btn:hover,
1679 +.mxchat-header-btn:focus {
1970 1680 opacity: 1;
1971 1681 background: rgba(255, 255, 255, 0.12);
1972 1682 outline: none;
1973 1683 }
1974 -.mxchat-chatbot-wrapper .mxchat-header-btn[aria-expanded="true"] {
1684 +.mxchat-header-btn[aria-expanded="true"] {
1975 1685 opacity: 1;
1976 1686 background: rgba(255, 255, 255, 0.12);
1977 1687 }
1978 -.mxchat-chatbot-wrapper .mxchat-menu-trigger svg {
1688 +.mxchat-menu-trigger svg {
1979 1689 width: 18px;
1980 1690 height: 18px;
1981 1691 }
1982 1692
1983 -.mxchat-chatbot-wrapper .mxchat-header-menu {
1693 +.mxchat-header-menu {
1984 1694 position: absolute;
1985 1695 top: calc(100% + 6px);
1986 1696 right: 0;
1987 1697 min-width: 220px;
1988 - margin: 0;
1989 1698 background: var(--mxchat-menu-bg, #ffffff);
1990 1699 color: var(--mxchat-menu-fg, #1a1a1a);
1991 1700 border: 1px solid rgba(127, 127, 127, 0.20);
1992 1701 border-radius: 10px;
@@ -1991,45 +1700,35 @@
1991 1700 border: 1px solid rgba(127, 127, 127, 0.20);
1992 1701 border-radius: 10px;
1993 1702 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
1994 1703 padding: 4px;
1995 - font-family: inherit;
1996 - z-index: 99;
1704 + z-index: 5;
1997 1705 opacity: 0;
1998 1706 transform: translateY(-4px);
1999 1707 pointer-events: none;
2000 1708 transition: opacity 0.12s ease, transform 0.12s ease;
2001 1709 }
2002 -.mxchat-chatbot-wrapper .mxchat-header-menu.is-open {
1710 +.mxchat-header-menu.is-open {
2003 1711 opacity: 1;
2004 1712 transform: translateY(0);
2005 1713 pointer-events: auto;
2006 1714 }
2007 -.mxchat-chatbot-wrapper .mxchat-header-menu[hidden] {
1715 +.mxchat-header-menu[hidden] {
2008 1716 display: none;
2009 1717 }
2010 -.mxchat-chatbot-wrapper .mxchat-menu-item {
1718 +.mxchat-menu-item {
2011 1719 display: flex;
2012 1720 align-items: center;
2013 1721 gap: 10px;
2014 1722 width: 100%;
2015 1723 padding: 8px 12px;
2016 - margin: 0;
2017 1724 min-height: 40px;
2018 1725 border: none;
2019 1726 background: transparent;
2020 - background-image: none;
2021 1727 color: inherit;
2022 - font-family: inherit;
2023 1728 font-size: 14px;
2024 1729 line-height: 1.3;
2025 - letter-spacing: normal;
2026 1730 text-align: left;
2027 - text-transform: none;
2028 - text-shadow: none;
2029 - white-space: nowrap;
2030 - appearance: none;
2031 - -webkit-appearance: none;
2032 1731 cursor: pointer;
2033 1732 border-radius: 6px;
2034 1733 transition: background 0.12s ease;
2035 1734 text-decoration: none;
@@ -2034,10 +1733,10 @@
2034 1733 transition: background 0.12s ease;
2035 1734 text-decoration: none;
2036 1735 box-sizing: border-box;
2037 1736 }
2038 -.mxchat-chatbot-wrapper .mxchat-menu-item:hover,
2039 -.mxchat-chatbot-wrapper .mxchat-menu-item:focus {
1737 +.mxchat-menu-item:hover,
1738 +.mxchat-menu-item:focus {
2040 1739 background: rgba(127, 127, 127, 0.18);
2041 1740 outline: none;
2042 1741 }
2043 1742 .mxchat-menu-item-icon {