PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.1.4
MxChat – AI Chatbot & Content Generation for WordPress v3.1.4
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 +20 -404 3.2.73.1.4 View file →
@@ -608,9 +608,8 @@
608 608 .questions-toggle-btn svg,
609 609 .questions-collapse-btn svg {
610 610 transition: transform 0.2s ease;
611 611 fill: none;
612 - stroke: #212121;
613 612 width: 25px;
614 613 height: 25px;
615 614 }
616 615
@@ -958,11 +957,9 @@
958 957 .chatbot-title-container {
959 958 display: flex;
960 959 align-items: center;
961 960 justify-content: space-between;
962 - gap: 10px;
963 - flex: 1 1 auto;
964 - min-width: 0;
961 + width: 100%;
965 962 }
966 963
967 964 .chatbot-title-group {
968 965 display: flex;
@@ -971,19 +968,13 @@
971 968 }
972 969
973 970 .chat-mode-indicator {
974 971 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);
972 + margin-right: 8px;
973 + padding: 4px 8px;
974 + border-radius: 12px;
975 + background: rgba(255, 255, 255, 0.2);
980 976 color: #ffffff;
981 - display: inline-flex;
982 - align-items: center;
983 - height: 22px;
984 - white-space: nowrap;
985 - flex: 0 0 auto;
986 977 }
987 978
988 979 .floating-chatbot {
989 980 position: fixed;
@@ -1033,9 +1024,9 @@
1033 1024 display: none !important;
1034 1025 }
1035 1026
1036 1027 .chatbot-top-bar button.exit-chat:hover {
1037 - background: rgba(255, 255, 255, 0.12);
1028 + background: none;
1038 1029 }
1039 1030 .visible {
1040 1031 display: flex;
1041 1032 }
@@ -1059,13 +1050,8 @@
1059 1050 z-index: 100000;
1060 1051 display: flex;
1061 1052 }
1062 1053
1063 -.floating-chatbot-button:focus-visible {
1064 - outline: 3px solid #7873f5;
1065 - outline-offset: 3px;
1066 -}
1067 -
1068 1054 .floating-chatbot-button img {
1069 1055 max-width: 100%;
1070 1056 max-height: 100%;
1071 1057 width: auto;
@@ -1080,36 +1066,29 @@
1080 1066 background: transparent;
1081 1067 border: none;
1082 1068 opacity: 0.8;
1083 1069 padding: 0;
1084 - width: 32px;
1085 - height: 32px;
1086 - min-width: 32px;
1087 - flex: 0 0 auto;
1088 - border-radius: 6px;
1089 - transition: opacity 0.15s ease, background 0.15s ease;
1070 + min-width: 20px;
1090 1071 }
1091 1072
1092 1073 .mxchat-chatbot-wrapper .chatbot-top-bar {
1093 1074 cursor: pointer;
1094 1075 color: #fff;
1095 - padding: 8px 12px;
1096 - min-height: 48px;
1097 - gap: 8px;
1076 + padding: 10px;
1098 1077 border-top-left-radius: 10px;
1099 1078 border-top-right-radius: 10px;
1100 1079 display: flex;
1101 1080 justify-content: space-between;
1102 - align-items: center;
1081 + align-items: start;
1103 1082 }
1104 1083
1105 1084 .mxchat-chatbot-wrapper .chatbot-top-bar .chatbot-title {
1106 - font-size: 15px;
1107 - line-height: 1.2;
1108 - padding: 0;
1085 + font-size: 16px;
1086 + line-height: 25px;
1087 + padding: 10px;
1109 1088 margin: 0;
1110 1089 font-family: 'Plus Jakarta Sans', sans-serif;
1111 - font-weight: 600;
1090 + font-weight: bold;
1112 1091 }
1113 1092
1114 1093 .exit-chat {
1115 1094 border: none;
@@ -1114,25 +1093,22 @@
1114 1093 .exit-chat {
1115 1094 border: none;
1116 1095 background: transparent;
1117 1096 cursor: pointer;
1118 - display: inline-flex;
1097 + display: flex;
1119 1098 align-items: center;
1120 1099 justify-content: center;
1121 - padding: 0;
1100 + padding: 5px;
1122 1101 margin-left: auto;
1123 1102 opacity: 0.8;
1124 - width: 32px;
1125 - height: 32px;
1126 - min-width: 32px;
1127 - flex: 0 0 auto;
1103 + min-width: 20px;
1128 1104 }
1129 1105
1130 1106 .exit-chat svg {
1131 - width: 18px;
1132 - height: 18px;
1133 - fill: none;
1134 - stroke: currentColor;
1107 + fill: white;
1108 + width: 24px;
1109 + height: 24px;
1110 + transform: rotate(270deg);
1135 1111 }
1136 1112
1137 1113 .mxchat-chatbot-wrapper .chatbot-footer {
1138 1114 text-align: center;
@@ -1162,41 +1138,8 @@
1162 1138 text-decoration: underline;
1163 1139 }
1164 1140
1165 1141 /* ========================================
1166 - INIT LOADER (shown while chat initializes)
1167 - ======================================== */
1168 -.mxchat-init-loader {
1169 - display: flex;
1170 - align-items: center;
1171 - justify-content: center;
1172 - flex-grow: 1;
1173 - min-height: 0;
1174 - animation: fadeIn 0.3s ease-in-out;
1175 -}
1176 -
1177 -.mxchat-init-loader-dots {
1178 - display: flex;
1179 - gap: 8px;
1180 -}
1181 -
1182 -.mxchat-init-loader-dots .dot {
1183 - width: 8px;
1184 - height: 8px;
1185 - border-radius: 50%;
1186 - background-color: #888;
1187 - animation: mxchat-dot-bounce 1.4s ease-in-out infinite both;
1188 -}
1189 -
1190 -.mxchat-init-loader-dots .dot:nth-child(1) {
1191 - animation-delay: -0.32s;
1192 -}
1193 -
1194 -.mxchat-init-loader-dots .dot:nth-child(2) {
1195 - animation-delay: -0.16s;
1196 -}
1197 -
1198 -/* ========================================
1199 1142 THINKING DOTS ANIMATION
1200 1143 ======================================== */
1201 1144 .chat-box .bot-message.temporary-message .thinking-dots-container {
1202 1145 display: flex;
@@ -1607,9 +1550,8 @@
1607 1550
1608 1551 /* SVG styles - these are MISSING */
1609 1552 .mxchat-popular-questions .mxchat-popular-questions-container .questions-collapse-btn svg {
1610 1553 fill: none;
1611 - stroke: #212121;
1612 1554 transition: transform 0.2s ease;
1613 1555 width: 25px;
1614 1556 height: 25px;
1615 1557 }
@@ -1625,331 +1567,5 @@
1625 1567
1626 1568 /* Hide when actually collapsed */
1627 1569 .mxchat-popular-questions.collapsed .mxchat-popular-questions-container .questions-collapse-btn {
1628 1570 display: none;
1629 -}
1630 -
1631 -/* ============================================================
1632 - Header overflow menu — 3-dot kebab + dropdown (v3.2.9 / v3.2.10)
1633 - Lives in .chatbot-top-bar to the LEFT of .exit-chat. Visual treatment
1634 - mirrors .exit-chat: transparent, white-on-dark, 0.8 opacity, 5px pad.
1635 -
1636 - v3.2.10: explicit `order` rules pin the visual order
1637 - title (0) | kebab (1) | down-arrow (2)
1638 - so the down-arrow is always the rightmost icon regardless of source
1639 - order or which sibling has margin-left:auto.
1640 - ============================================================ */
1641 -.mxchat-chatbot-wrapper .chatbot-top-bar > .chatbot-title-container { order: 0; }
1642 -.mxchat-chatbot-wrapper .chatbot-top-bar > .mxchat-header-menu-wrap { order: 1; }
1643 -.mxchat-chatbot-wrapper .chatbot-top-bar > .exit-chat { order: 2; }
1644 -
1645 -.mxchat-header-menu-wrap {
1646 - position: relative;
1647 - display: inline-flex;
1648 - align-items: center;
1649 - margin-left: auto; /* push kebab + arrow group to the right edge */
1650 -}
1651 -.mxchat-chatbot-wrapper .chatbot-top-bar .mxchat-header-menu-wrap ~ .exit-chat,
1652 -.mxchat-chatbot-wrapper .chatbot-top-bar .mxchat-header-menu-wrap + .exit-chat {
1653 - margin-left: 4px; /* even, snug gap between kebab and close */
1654 -}
1655 -.mxchat-chatbot-wrapper .chatbot-top-bar > .exit-chat:focus {
1656 - background: rgba(255, 255, 255, 0.12);
1657 - opacity: 1;
1658 - outline: none;
1659 -}
1660 -.mxchat-header-btn {
1661 - border: none;
1662 - background: transparent;
1663 - cursor: pointer;
1664 - display: inline-flex;
1665 - align-items: center;
1666 - justify-content: center;
1667 - padding: 0;
1668 - opacity: 0.8;
1669 - color: #fff;
1670 - transition: opacity 0.15s ease, background 0.15s ease;
1671 - border-radius: 6px;
1672 - line-height: 0;
1673 - width: 32px;
1674 - height: 32px;
1675 - min-width: 32px;
1676 - flex: 0 0 auto;
1677 -}
1678 -.mxchat-header-btn:hover,
1679 -.mxchat-header-btn:focus {
1680 - opacity: 1;
1681 - background: rgba(255, 255, 255, 0.12);
1682 - outline: none;
1683 -}
1684 -.mxchat-header-btn[aria-expanded="true"] {
1685 - opacity: 1;
1686 - background: rgba(255, 255, 255, 0.12);
1687 -}
1688 -.mxchat-menu-trigger svg {
1689 - width: 18px;
1690 - height: 18px;
1691 -}
1692 -
1693 -.mxchat-header-menu {
1694 - position: absolute;
1695 - top: calc(100% + 6px);
1696 - right: 0;
1697 - min-width: 220px;
1698 - background: var(--mxchat-menu-bg, #ffffff);
1699 - color: var(--mxchat-menu-fg, #1a1a1a);
1700 - border: 1px solid rgba(127, 127, 127, 0.20);
1701 - border-radius: 10px;
1702 - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
1703 - padding: 4px;
1704 - z-index: 5;
1705 - opacity: 0;
1706 - transform: translateY(-4px);
1707 - pointer-events: none;
1708 - transition: opacity 0.12s ease, transform 0.12s ease;
1709 -}
1710 -.mxchat-header-menu.is-open {
1711 - opacity: 1;
1712 - transform: translateY(0);
1713 - pointer-events: auto;
1714 -}
1715 -.mxchat-header-menu[hidden] {
1716 - display: none;
1717 -}
1718 -.mxchat-menu-item {
1719 - display: flex;
1720 - align-items: center;
1721 - gap: 10px;
1722 - width: 100%;
1723 - padding: 8px 12px;
1724 - min-height: 40px;
1725 - border: none;
1726 - background: transparent;
1727 - color: inherit;
1728 - font-size: 14px;
1729 - line-height: 1.3;
1730 - text-align: left;
1731 - cursor: pointer;
1732 - border-radius: 6px;
1733 - transition: background 0.12s ease;
1734 - text-decoration: none;
1735 - box-sizing: border-box;
1736 -}
1737 -.mxchat-menu-item:hover,
1738 -.mxchat-menu-item:focus {
1739 - background: rgba(127, 127, 127, 0.18);
1740 - outline: none;
1741 -}
1742 -.mxchat-menu-item-icon {
1743 - display: inline-flex;
1744 - align-items: center;
1745 - justify-content: center;
1746 - width: 16px;
1747 - height: 16px;
1748 - color: inherit;
1749 - opacity: 0.85;
1750 - flex-shrink: 0;
1751 -}
1752 -.mxchat-menu-item-icon svg {
1753 - width: 16px;
1754 - height: 16px;
1755 - display: block;
1756 -}
1757 -.mxchat-menu-item-label {
1758 - flex: 1;
1759 - color: inherit;
1760 -}
1761 -
1762 -/* RTL — flip the dropdown anchor edge */
1763 -[dir="rtl"] .mxchat-header-menu,
1764 -.mxchat-chatbot-wrapper[dir="rtl"] .mxchat-header-menu {
1765 - right: auto;
1766 - left: 0;
1767 -}
1768 -
1769 -/* ============================================================================
1770 - Satisfaction rating (v3.2.6 — polished per plan-141a12)
1771 - Theme-adaptive via currentColor + inherit. Clean slate — old rules removed.
1772 - ========================================================================= */
1773 -.mxchat-chatbot .chat-container .chat-box .mxchat-rating-prompt,
1774 -.mxchat-chatbot .chat-container .chat-box .mxchat-rating-feedback,
1775 -.mxchat-chatbot .chat-container .chat-box .mxchat-rating-saved {
1776 - clear: both;
1777 - float: left;
1778 - max-width: 92%;
1779 - box-sizing: border-box;
1780 -}
1781 -
1782 -/* Theme-adaptive wrapper — .bot-message carries the user's custom bg/color via
1783 - inline style; the inner rating component supplies its own padding + layout. */
1784 -.mxchat-rating-bot-bubble {
1785 - padding: 0;
1786 - overflow: visible;
1787 -}
1788 -
1789 -.mxchat-rating-prompt {
1790 - display: flex;
1791 - flex-direction: column;
1792 - align-items: stretch;
1793 - gap: 10px;
1794 - padding: 10px 14px;
1795 - margin: 10px 0;
1796 - font-size: 14px;
1797 - color: inherit;
1798 -}
1799 -
1800 -.mxchat-rating-question {
1801 - color: inherit;
1802 - opacity: 0.85;
1803 - font-weight: 500;
1804 -}
1805 -
1806 -.mxchat-rating-actions {
1807 - display: flex;
1808 - align-items: center;
1809 - gap: 8px;
1810 -}
1811 -
1812 -.mxchat-rating-buttons {
1813 - display: inline-flex;
1814 - gap: 6px;
1815 -}
1816 -
1817 -.mxchat-rating-btn {
1818 - display: inline-flex;
1819 - align-items: center;
1820 - justify-content: center;
1821 - width: 32px;
1822 - height: 32px;
1823 - border-radius: 8px;
1824 - background: transparent;
1825 - border: none;
1826 - color: inherit;
1827 - opacity: 0.6;
1828 - cursor: pointer;
1829 - transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
1830 - padding: 0;
1831 -}
1832 -
1833 -.mxchat-rating-btn:hover {
1834 - opacity: 1;
1835 - transform: scale(1.12);
1836 - background: rgba(255, 255, 255, 0.08);
1837 -}
1838 -
1839 -.mxchat-rating-btn:focus-visible {
1840 - opacity: 1;
1841 - outline: 2px solid currentColor;
1842 - outline-offset: 2px;
1843 -}
1844 -
1845 -.mxchat-rating-btn svg {
1846 - pointer-events: none;
1847 -}
1848 -
1849 -.mxchat-rating-dismiss {
1850 - width: 24px;
1851 - height: 24px;
1852 - border-radius: 6px;
1853 - background: transparent;
1854 - border: none;
1855 - color: inherit;
1856 - opacity: 0.45;
1857 - cursor: pointer;
1858 - font-size: 18px;
1859 - line-height: 1;
1860 - transition: opacity 0.18s ease, background-color 0.18s ease;
1861 -}
1862 -
1863 -.mxchat-rating-dismiss:hover {
1864 - opacity: 0.9;
1865 - background: rgba(255, 255, 255, 0.08);
1866 -}
1867 -
1868 -/* Feedback panel that replaces the prompt after a rating is clicked */
1869 -.mxchat-rating-feedback {
1870 - padding: 12px 14px;
1871 - margin: 10px 0;
1872 - display: flex;
1873 - flex-direction: column;
1874 - gap: 10px;
1875 - color: inherit;
1876 - animation: mxchat-rating-fade-in 0.22s ease;
1877 -}
1878 -
1879 -.mxchat-rating-feedback-label {
1880 - font-size: 13px;
1881 - opacity: 0.85;
1882 - font-weight: 500;
1883 -}
1884 -
1885 -.mxchat-rating-feedback-input {
1886 - width: 100%;
1887 - box-sizing: border-box;
1888 - padding: 8px 10px;
1889 - border: 1px solid rgba(255, 255, 255, 0.25);
1890 - border-radius: 8px;
1891 - font-size: 14px;
1892 - font-family: inherit;
1893 - resize: vertical;
1894 - background: rgba(255, 255, 255, 0.08);
1895 - color: inherit;
1896 -}
1897 -
1898 -.mxchat-rating-feedback-input:focus {
1899 - outline: none;
1900 - border-color: rgba(255, 255, 255, 0.45);
1901 - background: rgba(255, 255, 255, 0.15);
1902 -}
1903 -
1904 -.mxchat-rating-feedback-actions {
1905 - display: flex;
1906 - justify-content: flex-end;
1907 - gap: 8px;
1908 -}
1909 -
1910 -.mxchat-rating-skip,
1911 -.mxchat-rating-submit {
1912 - padding: 6px 14px;
1913 - border-radius: 8px;
1914 - font-size: 13px;
1915 - font-weight: 500;
1916 - cursor: pointer;
1917 - border: none;
1918 - transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
1919 -}
1920 -
1921 -.mxchat-rating-skip {
1922 - background: transparent;
1923 - color: inherit;
1924 - opacity: 0.6;
1925 -}
1926 -
1927 -.mxchat-rating-skip:hover {
1928 - opacity: 1;
1929 - background: rgba(255, 255, 255, 0.08);
1930 -}
1931 -
1932 -.mxchat-rating-submit {
1933 - background: currentColor;
1934 - color: var(--mxchat-bot-message-bg, #ffffff);
1935 -}
1936 -
1937 -.mxchat-rating-submit:hover {
1938 - transform: translateY(-1px);
1939 - opacity: 0.9;
1940 -}
1941 -
1942 -.mxchat-rating-saved {
1943 - padding: 10px 14px;
1944 - margin: 10px 0;
1945 - font-size: 13px;
1946 - font-weight: 500;
1947 - text-align: center;
1948 - color: inherit;
1949 - animation: mxchat-rating-fade-in 0.22s ease;
1950 -}
1951 -
1952 -@keyframes mxchat-rating-fade-in {
1953 - from { opacity: 0; transform: translateY(4px); }
1954 - to { opacity: 1; transform: translateY(0); }
1955 1571 }