PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.0.3
MxChat – AI Chatbot & Content Generation for WordPress v3.0.3
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 +35 -390 3.2.53.0.3 View file →
@@ -289,37 +289,8 @@
289 289
290 290 /* ========================================
291 291 CODE BLOCKS & INLINE CODE
292 292 ======================================== */
293 -.mxchat-table-wrapper {
294 - overflow-x: auto;
295 - margin: 12px 0;
296 - -webkit-overflow-scrolling: touch;
297 -}
298 -
299 -.mxchat-table {
300 - width: 100%;
301 - border-collapse: collapse;
302 - font-size: 0.9em;
303 - line-height: 1.4;
304 -}
305 -
306 -.mxchat-table th,
307 -.mxchat-table td {
308 - padding: 8px 12px;
309 - border: 1px solid rgba(128, 128, 128, 0.3);
310 - word-break: break-word;
311 -}
312 -
313 -.mxchat-table thead th {
314 - font-weight: 600;
315 - background: rgba(128, 128, 128, 0.15);
316 -}
317 -
318 -.mxchat-table tbody tr:nth-child(even) {
319 - background: rgba(128, 128, 128, 0.05);
320 -}
321 -
322 293 .mxchat-code-block-container {
323 294 margin: 16px 0;
324 295 border-radius: 8px;
325 296 background: rgba(255, 255, 255, 0.1);
@@ -608,9 +579,8 @@
608 579 .questions-toggle-btn svg,
609 580 .questions-collapse-btn svg {
610 581 transition: transform 0.2s ease;
611 582 fill: none;
612 - stroke: #212121;
613 583 width: 25px;
614 584 height: 25px;
615 585 }
616 586
@@ -958,11 +928,9 @@
958 928 .chatbot-title-container {
959 929 display: flex;
960 930 align-items: center;
961 931 justify-content: space-between;
962 - gap: 10px;
963 - flex: 1 1 auto;
964 - min-width: 0;
932 + width: 100%;
965 933 }
966 934
967 935 .chatbot-title-group {
968 936 display: flex;
@@ -971,19 +939,13 @@
971 939 }
972 940
973 941 .chat-mode-indicator {
974 942 font-size: 12px;
975 - line-height: 1;
976 - margin-right: 0;
977 - padding: 4px 9px;
978 - border-radius: 999px;
979 - background: rgba(255, 255, 255, 0.18);
943 + margin-right: 8px;
944 + padding: 4px 8px;
945 + border-radius: 12px;
946 + background: rgba(255, 255, 255, 0.2);
980 947 color: #ffffff;
981 - display: inline-flex;
982 - align-items: center;
983 - height: 22px;
984 - white-space: nowrap;
985 - flex: 0 0 auto;
986 948 }
987 949
988 950 .floating-chatbot {
989 951 position: fixed;
@@ -1033,9 +995,9 @@
1033 995 display: none !important;
1034 996 }
1035 997
1036 998 .chatbot-top-bar button.exit-chat:hover {
1037 - background: rgba(255, 255, 255, 0.12);
999 + background: none;
1038 1000 }
1039 1001 .visible {
1040 1002 display: flex;
1041 1003 }
@@ -1075,36 +1037,29 @@
1075 1037 background: transparent;
1076 1038 border: none;
1077 1039 opacity: 0.8;
1078 1040 padding: 0;
1079 - width: 32px;
1080 - height: 32px;
1081 - min-width: 32px;
1082 - flex: 0 0 auto;
1083 - border-radius: 6px;
1084 - transition: opacity 0.15s ease, background 0.15s ease;
1041 + min-width: 20px;
1085 1042 }
1086 1043
1087 1044 .mxchat-chatbot-wrapper .chatbot-top-bar {
1088 1045 cursor: pointer;
1089 1046 color: #fff;
1090 - padding: 8px 12px;
1091 - min-height: 48px;
1092 - gap: 8px;
1047 + padding: 10px;
1093 1048 border-top-left-radius: 10px;
1094 1049 border-top-right-radius: 10px;
1095 1050 display: flex;
1096 1051 justify-content: space-between;
1097 - align-items: center;
1052 + align-items: start;
1098 1053 }
1099 1054
1100 1055 .mxchat-chatbot-wrapper .chatbot-top-bar .chatbot-title {
1101 - font-size: 15px;
1102 - line-height: 1.2;
1103 - padding: 0;
1056 + font-size: 16px;
1057 + line-height: 25px;
1058 + padding: 10px;
1104 1059 margin: 0;
1105 1060 font-family: 'Plus Jakarta Sans', sans-serif;
1106 - font-weight: 600;
1061 + font-weight: bold;
1107 1062 }
1108 1063
1109 1064 .exit-chat {
1110 1065 border: none;
@@ -1109,25 +1064,22 @@
1109 1064 .exit-chat {
1110 1065 border: none;
1111 1066 background: transparent;
1112 1067 cursor: pointer;
1113 - display: inline-flex;
1068 + display: flex;
1114 1069 align-items: center;
1115 1070 justify-content: center;
1116 - padding: 0;
1071 + padding: 5px;
1117 1072 margin-left: auto;
1118 1073 opacity: 0.8;
1119 - width: 32px;
1120 - height: 32px;
1121 - min-width: 32px;
1122 - flex: 0 0 auto;
1074 + min-width: 20px;
1123 1075 }
1124 1076
1125 1077 .exit-chat svg {
1126 - width: 18px;
1127 - height: 18px;
1128 - fill: none;
1129 - stroke: currentColor;
1078 + fill: white;
1079 + width: 24px;
1080 + height: 24px;
1081 + transform: rotate(270deg);
1130 1082 }
1131 1083
1132 1084 .mxchat-chatbot-wrapper .chatbot-footer {
1133 1085 text-align: center;
@@ -1157,41 +1109,8 @@
1157 1109 text-decoration: underline;
1158 1110 }
1159 1111
1160 1112 /* ========================================
1161 - INIT LOADER (shown while chat initializes)
1162 - ======================================== */
1163 -.mxchat-init-loader {
1164 - display: flex;
1165 - align-items: center;
1166 - justify-content: center;
1167 - flex-grow: 1;
1168 - min-height: 0;
1169 - animation: fadeIn 0.3s ease-in-out;
1170 -}
1171 -
1172 -.mxchat-init-loader-dots {
1173 - display: flex;
1174 - gap: 8px;
1175 -}
1176 -
1177 -.mxchat-init-loader-dots .dot {
1178 - width: 8px;
1179 - height: 8px;
1180 - border-radius: 50%;
1181 - background-color: #888;
1182 - animation: mxchat-dot-bounce 1.4s ease-in-out infinite both;
1183 -}
1184 -
1185 -.mxchat-init-loader-dots .dot:nth-child(1) {
1186 - animation-delay: -0.32s;
1187 -}
1188 -
1189 -.mxchat-init-loader-dots .dot:nth-child(2) {
1190 - animation-delay: -0.16s;
1191 -}
1192 -
1193 -/* ========================================
1194 1113 THINKING DOTS ANIMATION
1195 1114 ======================================== */
1196 1115 .chat-box .bot-message.temporary-message .thinking-dots-container {
1197 1116 display: flex;
@@ -1219,9 +1138,9 @@
1219 1138 margin: 0 3px;
1220 1139 background-color: #fff;
1221 1140 border-radius: 50%;
1222 1141 display: inline-block;
1223 - animation: mxchat-dot-bounce 1.4s ease-in-out infinite both;
1142 + animation: bounce 1.4s ease-in-out infinite both;
1224 1143 vertical-align: middle;
1225 1144 }
1226 1145
1227 1146 .chat-box .bot-message.temporary-message .thinking-dots .dot:first-child {
@@ -1231,9 +1150,9 @@
1231 1150 .chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) {
1232 1151 animation-delay: -0.16s;
1233 1152 }
1234 1153
1235 -@keyframes mxchat-dot-bounce {
1154 +@keyframes bounce {
1236 1155 0%, 100%, 80% {
1237 1156 transform: scale(1);
1238 1157 }
1239 1158 40% {
@@ -1388,34 +1307,28 @@
1388 1307 right: 10px;
1389 1308 }
1390 1309
1391 1310 .floating-chatbot {
1392 - width: calc(100vw - 16px);
1311 + width: 100vw;
1393 1312 /* Use multiple fallbacks for maximum browser compatibility */
1394 - height: calc(100vh - 16px); /* Fallback */
1395 - height: calc(var(--vh, 1vh) * 100 - 16px); /* JS-set custom property fallback */
1396 - height: calc(100dvh - 16px); /* Modern dynamic viewport height */
1397 - max-height: calc(100vh - 16px);
1398 - max-height: calc(100dvh - 16px);
1313 + height: 100vh; /* Fallback */
1314 + height: calc(var(--vh, 1vh) * 100); /* JS-set custom property fallback */
1315 + height: 100dvh; /* Modern dynamic viewport height */
1316 + max-height: 100vh;
1317 + max-height: 100dvh;
1399 1318 margin: 0;
1400 1319 padding: 0;
1401 1320 position: fixed;
1402 - bottom: 8px;
1403 - top: auto;
1404 - left: 8px;
1405 - right: 8px;
1406 - border-radius: 16px;
1407 - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1321 + bottom: 0;
1322 + top: 0;
1323 + left: 0;
1324 + right: 0;
1325 + border-radius: 0;
1408 1326 }
1409 1327
1410 - .floating-chatbot .mxchat-chatbot-wrapper {
1411 - border-radius: 16px;
1412 - overflow: hidden;
1413 - }
1414 -
1415 1328 .mxchat-chatbot-wrapper .chatbot-top-bar {
1416 - border-top-left-radius: 16px;
1417 - border-top-right-radius: 16px;
1329 + border-top-left-radius: 0;
1330 + border-top-right-radius: 0;
1418 1331 }
1419 1332 }
1420 1333
1421 1334
@@ -1602,9 +1515,8 @@
1602 1515
1603 1516 /* SVG styles - these are MISSING */
1604 1517 .mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn svg {
1605 1518 fill: none;
1606 - stroke: #212121;
1607 1519 transition: transform 0.2s ease;
1608 1520 width: 25px;
1609 1521 height: 25px;
1610 1522 }
@@ -1620,272 +1532,5 @@
1620 1532
1621 1533 /* Hide when actually collapsed */
1622 1534 .mxchat-popular-questions.collapsed .mxchat-popular-questions-container .questions-collapse-btn {
1623 1535 display: none;
1624 -}
1625 -
1626 -/* ============================================================
1627 - Header overflow menu — 3-dot kebab + dropdown (v3.2.9 / v3.2.10)
1628 - Lives in .chatbot-top-bar to the LEFT of .exit-chat. Visual treatment
1629 - mirrors .exit-chat: transparent, white-on-dark, 0.8 opacity, 5px pad.
1630 -
1631 - v3.2.10: explicit `order` rules pin the visual order
1632 - title (0) | kebab (1) | down-arrow (2)
1633 - so the down-arrow is always the rightmost icon regardless of source
1634 - order or which sibling has margin-left:auto.
1635 - ============================================================ */
1636 -.mxchat-chatbot-wrapper .chatbot-top-bar > .chatbot-title-container { order: 0; }
1637 -.mxchat-chatbot-wrapper .chatbot-top-bar > .mxchat-header-menu-wrap { order: 1; }
1638 -.mxchat-chatbot-wrapper .chatbot-top-bar > .exit-chat { order: 2; }
1639 -
1640 -.mxchat-header-menu-wrap {
1641 - position: relative;
1642 - display: inline-flex;
1643 - align-items: center;
1644 - margin-left: auto; /* push kebab + arrow group to the right edge */
1645 -}
1646 -.mxchat-chatbot-wrapper .chatbot-top-bar .mxchat-header-menu-wrap ~ .exit-chat,
1647 -.mxchat-chatbot-wrapper .chatbot-top-bar .mxchat-header-menu-wrap + .exit-chat {
1648 - margin-left: 4px; /* even, snug gap between kebab and close */
1649 -}
1650 -.mxchat-chatbot-wrapper .chatbot-top-bar > .exit-chat:focus {
1651 - background: rgba(255, 255, 255, 0.12);
1652 - opacity: 1;
1653 - outline: none;
1654 -}
1655 -.mxchat-header-btn {
1656 - border: none;
1657 - background: transparent;
1658 - cursor: pointer;
1659 - display: inline-flex;
1660 - align-items: center;
1661 - justify-content: center;
1662 - padding: 0;
1663 - opacity: 0.8;
1664 - color: #fff;
1665 - transition: opacity 0.15s ease, background 0.15s ease;
1666 - border-radius: 6px;
1667 - line-height: 0;
1668 - width: 32px;
1669 - height: 32px;
1670 - min-width: 32px;
1671 - flex: 0 0 auto;
1672 -}
1673 -.mxchat-header-btn:hover,
1674 -.mxchat-header-btn:focus {
1675 - opacity: 1;
1676 - background: rgba(255, 255, 255, 0.12);
1677 - outline: none;
1678 -}
1679 -.mxchat-header-btn[aria-expanded="true"] {
1680 - opacity: 1;
1681 - background: rgba(255, 255, 255, 0.12);
1682 -}
1683 -.mxchat-menu-trigger svg {
1684 - width: 18px;
1685 - height: 18px;
1686 -}
1687 -
1688 -.mxchat-header-menu {
1689 - position: absolute;
1690 - top: calc(100% + 6px);
1691 - right: 0;
1692 - min-width: 220px;
1693 - background: var(--mxchat-menu-bg, #ffffff);
1694 - color: var(--mxchat-menu-fg, #1a1a1a);
1695 - border: 1px solid rgba(127, 127, 127, 0.20);
1696 - border-radius: 10px;
1697 - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
1698 - padding: 4px;
1699 - z-index: 5;
1700 - opacity: 0;
1701 - transform: translateY(-4px);
1702 - pointer-events: none;
1703 - transition: opacity 0.12s ease, transform 0.12s ease;
1704 -}
1705 -.mxchat-header-menu.is-open {
1706 - opacity: 1;
1707 - transform: translateY(0);
1708 - pointer-events: auto;
1709 -}
1710 -.mxchat-header-menu[hidden] {
1711 - display: none;
1712 -}
1713 -.mxchat-menu-item {
1714 - display: flex;
1715 - align-items: center;
1716 - gap: 10px;
1717 - width: 100%;
1718 - padding: 8px 12px;
1719 - min-height: 40px;
1720 - border: none;
1721 - background: transparent;
1722 - color: inherit;
1723 - font-size: 14px;
1724 - line-height: 1.3;
1725 - text-align: left;
1726 - cursor: pointer;
1727 - border-radius: 6px;
1728 - transition: background 0.12s ease;
1729 - text-decoration: none;
1730 - box-sizing: border-box;
1731 -}
1732 -.mxchat-menu-item:hover,
1733 -.mxchat-menu-item:focus {
1734 - background: rgba(127, 127, 127, 0.18);
1735 - outline: none;
1736 -}
1737 -.mxchat-menu-item-icon {
1738 - display: inline-flex;
1739 - align-items: center;
1740 - justify-content: center;
1741 - width: 16px;
1742 - height: 16px;
1743 - color: inherit;
1744 - opacity: 0.85;
1745 - flex-shrink: 0;
1746 -}
1747 -.mxchat-menu-item-icon svg {
1748 - width: 16px;
1749 - height: 16px;
1750 - display: block;
1751 -}
1752 -.mxchat-menu-item-label {
1753 - flex: 1;
1754 - color: inherit;
1755 -}
1756 -
1757 -/* RTL — flip the dropdown anchor edge */
1758 -[dir="rtl"] .mxchat-header-menu,
1759 -.mxchat-chatbot-wrapper[dir="rtl"] .mxchat-header-menu {
1760 - right: auto;
1761 - left: 0;
1762 -}
1763 -
1764 -/* ============================================================
1765 - Print stylesheet — clean conversation export (v3.2.9 rebuild)
1766 - Goal: full-page-width transcript, no right-edge clipping, all chrome hidden.
1767 - ============================================================ */
1768 -@media print {
1769 - body * {
1770 - visibility: hidden !important;
1771 - }
1772 - .mxchat-conversation-print-root,
1773 - .mxchat-conversation-print-root * {
1774 - visibility: visible !important;
1775 - }
1776 - .mxchat-conversation-print-root {
1777 - position: absolute !important;
1778 - left: 0 !important;
1779 - top: 0 !important;
1780 - right: 0 !important;
1781 - width: 100% !important;
1782 - max-width: 100% !important;
1783 - height: auto !important;
1784 - min-height: 0 !important;
1785 - max-height: none !important;
1786 - overflow: visible !important;
1787 - background: #fff !important;
1788 - color: #000 !important;
1789 - padding: 24px 32px !important;
1790 - margin: 0 !important;
1791 - box-shadow: none !important;
1792 - border: none !important;
1793 - transform: none !important;
1794 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
1795 - direction: inherit;
1796 - box-sizing: border-box !important;
1797 - }
1798 - .mxchat-conversation-print-root::before {
1799 - content: attr(data-print-title);
1800 - display: block;
1801 - font-size: 16px;
1802 - font-weight: 600;
1803 - color: #000;
1804 - border-bottom: 1px solid #000;
1805 - padding-bottom: 8px;
1806 - margin-bottom: 16px;
1807 - }
1808 - .mxchat-conversation-print-root .user-message,
1809 - .mxchat-conversation-print-root .bot-message,
1810 - .mxchat-conversation-print-root .agent-message {
1811 - display: block !important;
1812 - position: static !important;
1813 - float: none !important;
1814 - width: 100% !important;
1815 - max-width: 100% !important;
1816 - min-width: 0 !important;
1817 - background: transparent !important;
1818 - color: #000 !important;
1819 - border: none !important;
1820 - border-radius: 0 !important;
1821 - box-shadow: none !important;
1822 - padding: 8px 0 !important;
1823 - margin: 0 0 12px 0 !important;
1824 - page-break-inside: avoid;
1825 - overflow-wrap: anywhere;
1826 - word-break: break-word;
1827 - box-sizing: border-box !important;
1828 - }
1829 - .mxchat-conversation-print-root .user-message *,
1830 - .mxchat-conversation-print-root .bot-message *,
1831 - .mxchat-conversation-print-root .agent-message * {
1832 - max-width: 100% !important;
1833 - box-sizing: border-box !important;
1834 - color: #000 !important;
1835 - }
1836 - .mxchat-conversation-print-root .user-message::before {
1837 - content: "You: ";
1838 - font-weight: 600;
1839 - color: #000;
1840 - }
1841 - .mxchat-conversation-print-root .bot-message::before {
1842 - content: "Bot: ";
1843 - font-weight: 600;
1844 - color: #000;
1845 - }
1846 - .mxchat-conversation-print-root .agent-message::before {
1847 - content: "Agent: ";
1848 - font-weight: 600;
1849 - color: #000;
1850 - }
1851 - .mxchat-conversation-print-root pre,
1852 - .mxchat-conversation-print-root code {
1853 - background: #f4f4f4 !important;
1854 - color: #000 !important;
1855 - border: 1px solid #ddd !important;
1856 - white-space: pre-wrap !important;
1857 - word-wrap: break-word !important;
1858 - overflow-wrap: anywhere !important;
1859 - max-width: 100% !important;
1860 - box-sizing: border-box !important;
1861 - }
1862 - .mxchat-conversation-print-root img,
1863 - .mxchat-conversation-print-root .image-gallery img {
1864 - max-width: 100% !important;
1865 - height: auto !important;
1866 - }
1867 - .mxchat-conversation-print-root a {
1868 - color: #000 !important;
1869 - text-decoration: underline;
1870 - word-break: break-all;
1871 - }
1872 - /* Hide widget chrome inside the transcript */
1873 - .mxchat-conversation-print-root .mxchat-copy-button,
1874 - .mxchat-conversation-print-root .thinking-dots,
1875 - .mxchat-conversation-print-root .temporary-message,
1876 - .mxchat-conversation-print-root .mxchat-product-card button,
1877 - .mxchat-conversation-print-root .mxchat-popular-questions,
1878 - .mxchat-conversation-print-root .mxchat-input-container,
1879 - .mxchat-conversation-print-root .mxchat-top-bar,
1880 - .mxchat-conversation-print-root .mxchat-toolbar,
1881 - .mxchat-conversation-print-root .mxchat-header-menu-wrap,
1882 - .mxchat-conversation-print-root .mxchat-header-menu,
1883 - .mxchat-conversation-print-root .mxchat-menu-trigger {
1884 - display: none !important;
1885 - }
1886 - /* Page setup */
1887 - @page {
1888 - margin: 0.5in;
1889 - size: auto;
1890 - }
1891 1536 }