PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 3.7.3
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v3.7.3
8.7.8 8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 All 534 releases
← All changes | css/common-style.css +53 -651 8.7.23.7.3 View file →
@@ -143,13 +143,13 @@
143 143 box-shadow: #767580 0px 4px 20px;
144 144 }
145 145
146 146 #wp-chatbot-ball .wp-chatbot-ball img {
147 - width: 56px !important;
148 - height: 56px !important;
147 + width: 60px !important;
148 + height: 60px !important;
149 149 display: block;
150 150 border-radius: 50%;
151 - margin: 2px ;
151 + padding: 6px;
152 152 }
153 153
154 154 .wp-chatbot-ball-animator {
155 155 position: relative;
@@ -190,11 +190,9 @@
190 190 border: 3px solid transparent;
191 191 border-top-color: #FF00FF;
192 192 animation: spin 1.5s linear infinite;
193 193 }
194 -.wp-chatbot-footer div#wp-chatbot-editor-container {
195 - display: flex;
196 -}
194 +
197 195 @keyframes spin {
198 196 0% {
199 197 -webkit-transform: rotate(0deg);
200 198 -ms-transform: rotate(0deg);
@@ -232,17 +230,8 @@
232 230 display: inline-block;
233 231 vertical-align: top;
234 232 }
235 233
236 -/* Hide slimScroll when message content fits (slimScroll otherwise shows a ghost bar) */
237 -.slimScrollDiv.wpbot-no-scroll > .slimScrollBar,
238 -.slimScrollDiv.wpbot-no-scroll > .slimScrollRail {
239 - display: none !important;
240 - opacity: 0 !important;
241 - visibility: hidden !important;
242 - pointer-events: none !important;
243 -}
244 -
245 234 .wp-chatbot-header {
246 235 border-radius: 5px 5px 0 0;
247 236 margin: 0;
248 237 padding: 15px 15px;
@@ -256,11 +245,13 @@
256 245 padding: 0 !important;
257 246 }
258 247
259 248 .wp-chatbot-content {
249 + height: calc(100vh - 277px);
260 250 position: relative;
261 251 padding: 15px;
262 252 box-sizing: border-box;
253 + max-height: 564px;
263 254 }
264 255
265 256 .wp-chatbot-product-reload.wp-chatbot-product-loading {
266 257 display: block;
@@ -380,11 +371,10 @@
380 371 display: none;
381 372 }
382 373
383 374 #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
384 - width: 40px;
385 - height: 40px;
386 - object-fit: cover;
375 + width: 40px !important;
376 + height: 40px !important;
387 377 }
388 378
389 379 /*********************************************************************************
390 380 4. Tab
@@ -540,8 +530,33 @@
540 530 box-shadow: none;
541 531 background: none;
542 532 }
543 533
534 +.wp-chatbot-editor-container button {
535 + display: inline-block;
536 + height: 40px;
537 + background: transparent url("../images/send-button.png") no-repeat center;
538 + color: transparent;
539 + width: 20%;
540 + cursor: pointer;
541 + margin: 0 0 0 -8px;
542 + padding: 0;
543 + border: none;
544 + outline: none;
545 +}
546 +
547 +.wp-chatbot-editor-container button:hover {
548 + background: transparent url("../images/send-button.png") no-repeat center;
549 + color: transparent;
550 +}
551 +
552 +.wp-chatbot-editor-container button:focus {
553 + outline: none;
554 + border: none;
555 + box-shadow: none;
556 + background: transparent url("../images/send-button.png") no-repeat center;
557 +}
558 +
544 559 /*****************************************************************************************
545 560 6. Message Item
546 561 *********************************************************************************************/
547 562 /*Load More Product*/
@@ -1216,30 +1231,8 @@
1216 1231 .wp-chatbot-notification-message {
1217 1232 transition: opacity 0.5s;
1218 1233 }
1219 1234
1220 -div#wp-chatbot-desktop-reload {
1221 - background: transparent;
1222 - width: 30px;
1223 - height: 30px;
1224 - border-radius: 50%;
1225 - position: absolute;
1226 - top: -21px;
1227 - right: 25px;
1228 - color: #ffffff;
1229 - cursor: pointer;
1230 - text-align: center;
1231 - box-sizing: border-box;
1232 - transition: 0.2s;
1233 - transform: translateY(20px);
1234 -}
1235 -div#wp-chatbot-desktop-close span{
1236 - position: relative;
1237 -}
1238 -div#wp-chatbot-desktop-reload span {
1239 - position: relative;
1240 - top: 6px;
1241 -}
1242 1235 #wp-chatbot-desktop-close {
1243 1236 display: block;
1244 1237 position: absolute;
1245 1238 right: 3px;
@@ -1249,9 +1242,9 @@
1249 1242 line-height: 20px;
1250 1243 top: -20px;
1251 1244 width: 30px;
1252 1245 height: 30px;
1253 - background-color: transparent;
1246 + background-color: #7d8999;
1254 1247 border-radius: 50%;
1255 1248 color: #ffffff;
1256 1249 cursor: pointer;
1257 1250 text-align: center;
@@ -1300,11 +1293,9 @@
1300 1293 .wp-chatbot-notification-container:hover .wp-chatbot-notification-close {
1301 1294 visibility: visible;
1302 1295 transform: translateY(0px);
1303 1296 }
1304 -ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph{
1305 - display: block !important;
1306 -}
1297 +
1307 1298 .wp-chatbot-ball-cart-items {
1308 1299 bottom: -8px;
1309 1300 left: -11px;
1310 1301 position: absolute;
@@ -1370,11 +1361,9 @@
1370 1361 background-position: 0 -80px;
1371 1362 border: none !important;
1372 1363 box-shadow: none !important;
1373 1364 }
1374 -.swal2-container {
1375 - z-index: 99999999;
1376 -}
1365 +
1377 1366 .facebook-messenger {
1378 1367 background-position: 0 -80px;
1379 1368 }
1380 1369
@@ -1410,112 +1399,8 @@
1410 1399 .fb_dialog > .fb_dialog_content {
1411 1400 opacity: 0.01;
1412 1401 }
1413 1402
1414 -
1415 -
1416 -
1417 -/**********************************************************************************************
1418 -**********************************************************************************************
1419 -************************************* text writing animation ************************************
1420 -***********************************************************************************************
1421 -***********************************************************************************************/
1422 -/* @keyframes letters {
1423 - from {
1424 - left: 0;
1425 - }
1426 - to {
1427 - left: 100%;
1428 - }
1429 - }
1430 - @keyframes lines {
1431 - from {
1432 - top: 0;
1433 - }
1434 - to {
1435 - top: 100%;
1436 - }
1437 - }
1438 - @keyframes cursor-type {
1439 - 50% {
1440 - border-color: #1f8ceb00;
1441 - }
1442 - }
1443 - @keyframes cursor-wait {
1444 - 0% {
1445 - box-shadow: inset 2px 0 0 0 rgba(0, 0, 0, 0);
1446 - }
1447 - 1% {
1448 - box-shadow: inset 2px 0 0 0 #1f8ceb00;
1449 - }
1450 - 40% {
1451 - box-shadow: inset 2px 0 0 0 #1f8ceb00;
1452 - }
1453 - }
1454 -
1455 -
1456 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation {
1457 - position: relative;
1458 - width: 100%;
1459 - line-height: 1.2;
1460 - word-break: break-all;
1461 - overflow: hidden;
1462 - }
1463 - @supports (width: 1ch) {
1464 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before, li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1465 - box-sizing: border-box;
1466 - content: "";
1467 - position: absolute;
1468 - z-index: 1;
1469 - display: block;
1470 - height: 1.2em;
1471 - width: 100%;
1472 - background-color: #1f8ceb;
1473 - }
1474 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1475 - border-left: 2px solid transparent;
1476 - top: 100%;
1477 - animation-name: letters, lines, cursor-type, cursor-wait;
1478 - animation-fill-mode: both, both, both, backwards;
1479 - }
1480 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1481 - content: "";
1482 - height: 100%;
1483 - top: 100%;
1484 - left: 0;
1485 - margin-top: 1.2em;
1486 - }
1487 - }
1488 -
1489 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:before {
1490 - animation-duration: 1.4285714286s, 1.4285714286s, 0.0285714286s, 0.8s;
1491 - animation-timing-function: steps(50, end), steps(1, end), step-end, ease-out;
1492 - animation-iteration-count: 1, 1, 35, 2;
1493 - animation-delay: 0.6s, 0.6s, 0.6s, 1.0s;
1494 - }
1495 - li.wp-chatbot-msg .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1496 - animation: lines 1.4285714286s steps(1, end) 1;
1497 - animation-fill-mode: backwards;
1498 - animation-delay: 1.0s;
1499 - }
1500 -
1501 -
1502 - ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child{
1503 - background-color: #fff;
1504 - }
1505 -
1506 -
1507 - ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child .wp-chatbot-paragraph .wp-chatbot-textanimation:before, ul.wp-chatbot-messages-container > li.wp-chatbot-msg:first-child .wp-chatbot-paragraph .wp-chatbot-textanimation:after {
1508 - box-sizing: border-box;
1509 - content: "";
1510 - position: absolute;
1511 - z-index: 1;
1512 - display: block;
1513 - height: 1.2em;
1514 - width: 100%;
1515 - background-color: #1f8ceb00;
1516 - } */
1517 -
1518 1403 /****************************************************************************************************
1519 1404 11 Responsive
1520 1405 ****************************************************************************************************/
1521 1406 @media screen and (max-width: 1200px) {
@@ -1560,12 +1445,8 @@
1560 1445 }
1561 1446
1562 1447
1563 1448 @media screen and (max-width: 767px) {
1564 - body div#wp-chatbot-ball-container {
1565 - max-width: 98%;
1566 - margin: 0 auto 3px auto;
1567 - }
1568 1449 .wp-chatbot-header {
1569 1450 padding-left: 50px;
1570 1451 padding-right: 50px;
1571 1452 }
@@ -1572,9 +1453,14 @@
1572 1453
1573 1454 .wp-chatbot-board-container{
1574 1455 width: 310px;
1575 1456 }
1457 + .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1458 + width: 100%;
1459 + }
1576 1460
1461 +
1462 +
1577 1463 #wp-chatbot-mobile-close {
1578 1464 position: absolute;
1579 1465 right: 12px;
1580 1466 top: 9px;
@@ -1634,506 +1520,22 @@
1634 1520 .wp-chatbot-notification-container {
1635 1521 width: 250px;
1636 1522 padding-top: 55px;
1637 1523 }
1524 + /*#wp-chatbot-desktop-close{
1525 + right: 8px !important;
1526 + top: 8px !important;
1527 + }*/
1528 + /*.wp-chatbot-mobile-full-screen #wp-chatbot-desktop-close{
1529 + display:none !important;
1530 + }*/
1638 1531 .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1639 1532 padding-top: 15px !important;
1640 1533 }
1641 1534 }
1642 -.wpb-search-result a{
1643 - display: block;
1535 +.wpb-search-result{}
1536 +.wpb-search-result p{}
1537 +.wpb-search-result a{display: block;
1644 1538 background: #fff;
1645 - margin-bottom: 0;
1646 - padding: 5px;
1647 -}
1648 -@media screen and (-webkit-min-device-pixel-ratio:0) {
1649 - .qcwp-chatbot-search-article input:focus,
1650 - .qcwp-chatbot-search-article input {
1651 - font-size: 14px;
1652 - }
1653 -
1654 - input#wp-chatbot-editor:focus,
1655 - input#wp-chatbot-editor {
1656 - font-size: 14px;
1657 - }
1658 -
1659 - }
1660 -/*modal form*/
1661 -.plugin-card{
1662 - width: 77% !important;
1663 - height: 186px;
1664 -}
1665 -.plugin-action-buttons li a{
1666 - font-size: 13px;
1667 -}
1668 -.name a{
1669 - text-decoration: none !important;
1670 -}
1539 + margin-bottom: 7px;
1540 + padding: 5px;}
1671 1541
1672 -.cxsc-settings-blocks-addon {
1673 - width: 100% !important;
1674 - }
1675 - .plugin-card {
1676 - width: 100% !important;
1677 - }
1678 - span.chatbotquote-info {
1679 - font-size: 38px;
1680 - padding: 20px 0 0 0;
1681 - position: absolute;
1682 - left: 0;
1683 - top: 32px;
1684 -}
1685 -.wp-chatbot-textanimation {
1686 - position: relative;
1687 -}
1688 -ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph .wp-chatbot-textanimation h3 {
1689 - padding: 0 0 0 22px !important;
1690 -}
1691 -span.chatbotquote-info-foot {
1692 - font-size: 38px;
1693 - padding: 0px 0 0 130px;
1694 - position: static;
1695 - bottom: -20px;
1696 - display: grid;
1697 - line-height: 0;
1698 -}
1699 -wp-chatbot-editor-container input::placeholder {
1700 - color: #181818 !important;
1701 -}
1702 -.wp-chatbot-editor-container input::-ms-input-placeholder {
1703 - color: #181818 !important;
1704 -}
1705 -.wpb-search-result a {
1706 - display: block;
1707 - background: #eeeeee00 !important;
1708 - padding: 4px 5px;
1709 - line-height: 20px;
1710 - padding-left: 0px !important;
1711 - margin-bottom: 0;
1712 - color: #222 !important;
1713 -}
1714 -.wpb-search-result a p {
1715 - margin-bottom: 0;
1716 -}
1717 -.wpb-search-result a {
1718 - color: #222;
1719 -}
1720 -.wpbot_card_caption p {
1721 - color: #222;
1722 -}
1723 -
1724 -
1725 -.wp-chatbot-textanimation ul {
1726 - margin: 12px 0 8px 20px !important;
1727 -}
1728 -.wp-chatbot-textanimation ul li {
1729 - list-style-type: "✓";
1730 - padding-left: 6px;
1731 -}
1732 -
1733 -.wp-chatbot-textanimation ul li::marker {
1734 - color: #1d73b4;
1735 - font-weight: bold;
1736 -}
1737 -
1738 -/** like dislike thumbs icons**/
1739 -
1740 -
1741 -
1742 -.qcld-like-dislike-icon {
1743 - display: none;
1744 -}
1745 -
1746 -.qcld-like-dislike-icon a {
1747 - padding: 0 5px;
1748 -}
1749 -
1750 -.qcld-like-dislike-icon i {
1751 - color: #1d73b4;
1752 -}
1753 -
1754 -ul.wp-chatbot-messages-container>li>.wp-chatbot-paragraph,
1755 -.wp-chatbot-agent-profile .wp-chatbot-bubble {
1756 - padding: 8px 15px 15px 15px;
1757 -}
1758 -
1759 -/* ul.wp-chatbot-messages-container>li.wp-chatbot-msg:hover .qcld-like-dislike-icon {
1760 - opacity: 1;
1761 -} */
1762 -.qcld-share {
1763 - position: relative;
1764 - display: inline-block;
1765 -}
1766 -
1767 -.qcld-share .share-menu {
1768 - position: absolute;
1769 - bottom: 100%;
1770 - left: -6px;
1771 - background: #fff;
1772 - border: 1px solid #ddd;
1773 - padding: 5px;
1774 - display: flex;
1775 - gap: 8px;
1776 - border-radius: 5px;
1777 -}
1778 -
1779 -.qcld-share .share-menu a {
1780 - color: #333;
1781 - font-size: 16px;
1782 -}
1783 -
1784 -/**Modal style**/
1785 -#wpbot-report-modal>div {
1786 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%) !important;
1787 - background: #1d73b4 !important;
1788 - backdrop-filter: blur(0px);
1789 - isolation: isolate;
1790 -}
1791 -
1792 -#wpbot-report-modal input#wpbot-report-email {
1793 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1794 - background: #ffffff61;
1795 - backdrop-filter: blur(0px);
1796 - isolation: isolate;
1797 - margin: 0 0;
1798 - border-radius: 6PX;
1799 - padding: 10px 10px;
1800 - border: none;
1801 - width: 96% !important;
1802 - color: #fff;
1803 -}
1804 -
1805 -#wpbot-report-modal textarea#wpbot-report-text {
1806 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1807 - background: #ffffff61;
1808 - backdrop-filter: blur(0px);
1809 - isolation: isolate;
1810 - margin: 0 0;
1811 - border-radius: 6PX;
1812 - padding: 10px 10px;
1813 - border: none;
1814 - width: 96% !important;
1815 - color: #fff;
1816 -}
1817 -
1818 -#wpbot-report-modal textarea#wpbot-report-text:focus-visible {
1819 - box-shadow: none;
1820 - outline: none;
1821 -}
1822 -
1823 -#wpbot-report-modal input#wpbot-report-email:focus-visible {
1824 - box-shadow: none;
1825 - outline: none;
1826 -}
1827 -
1828 -#wpbot-report-modal>div h3 {
1829 - font-size: 20px;
1830 - font-weight: bold;
1831 - color: #fff;
1832 -}
1833 -
1834 -#wpbot-report-modal>div label {
1835 - font-size: 16px;
1836 - font-weight: bold;
1837 - color: #fff;
1838 -}
1839 -
1840 -#wpbot-report-modal>div button {
1841 - transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
1842 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1843 - background: rgb(255 255 255 / 25%);
1844 - backdrop-filter: none;
1845 - isolation: isolate;
1846 - color: rgb(29 115 180) !important;
1847 - margin: 2px 2px;
1848 - border: 1px solid #fff !important;
1849 - padding: 8px 15px;
1850 - border-radius: 8px;
1851 - color: #ffffff !important;
1852 - font-size: 14px;
1853 - font-weight: bold;
1854 - cursor: pointer;
1855 -}
1856 -
1857 -#wpbot-report-modal>div button:hover {
1858 - transform: scale(0.95);
1859 -}
1860 -
1861 -.qcld-like-dislike-icon a .liked {
1862 - color: green;
1863 - cursor: default;
1864 - pointer-events: none;
1865 -}
1866 -
1867 -.qcld-like-dislike-icon a .disliked {
1868 - color: red;
1869 - cursor: default;
1870 - pointer-events: none;
1871 -}
1872 -
1873 -ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container .wp-chatbot-paragraph {
1874 - box-shadow: none;
1875 - background: transparent;
1876 - backdrop-filter: none;
1877 - isolation: inherit;
1878 -}
1879 -
1880 -
1881 -
1882 -ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1883 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1884 - background: rgb(255 255 255 / 30%);
1885 - backdrop-filter: blur(0px);
1886 - isolation: isolate;
1887 - border-radius: 10px;
1888 - padding: 8px 15px;
1889 -}
1890 -
1891 -.qcld-like-dislike-icon {
1892 - padding: 6px 0 0 0;
1893 - margin-top: 20px;
1894 -}
1895 -
1896 -
1897 -
1898 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked {
1899 - position: relative;
1900 - font-size: 0px !important;
1901 -}
1902 -
1903 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1904 - content: "\f164" !important;
1905 - left: 0px;
1906 - bottom: 0;
1907 - font-size: 16px !important;
1908 -}
1909 -
1910 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked {
1911 - position: relative;
1912 - font-size: 0px !important;
1913 -}
1914 -
1915 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before {
1916 - content: "\f165" !important;
1917 - left: 0px;
1918 - bottom: 0;
1919 - font-size: 16px !important;
1920 -}
1921 -
1922 -.qcld-like-dislike-icon a {
1923 - padding: 0 0px;
1924 -}
1925 -
1926 -.qcld-like-dislike-icon a i {
1927 - transition: all 0.2s ease-in-out;
1928 -}
1929 -
1930 -.qcld-like-dislike-icon a i:hover {
1931 - transform: scale(1.5);
1932 -}
1933 -
1934 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-up.liked:before {
1935 - transition: all 0.2s ease-in-out;
1936 -}
1937 -
1938 -.qcld-like-dislike-icon i.fa.fa-thumbs-o-down.disliked:before:hover {
1939 - transform: scale(1.5);
1940 -}
1941 -
1942 -.qcld-like-dislike-icon a {
1943 - outline: none !important;
1944 -}
1945 -
1946 -
1947 -.qcld-like-dislike-icon a {
1948 - padding: 0 10px 0 0;
1949 -}
1950 -
1951 -.qcld-like-dislike-icon .share-menu a {
1952 - padding: 0 0 0 0 !important;
1953 -}
1954 -
1955 -.qcld-like-dislike-icon i {
1956 - color: #ffffff;
1957 -}
1958 -
1959 -.wp-chatbot-textanimation ul {
1960 - margin: 12px 0 8px 20px !important;
1961 - padding: 0;
1962 -}
1963 -.qcld-like-dislike-icon i {
1964 - color: #1e74b3;
1965 -}
1966 -.qcld-like-dislike-icon a i {
1967 - font-size: 16px;
1968 - padding: 0;
1969 - height: auto;
1970 -}
1971 -.qcld-like-dislike-icon a {
1972 - padding: 0 5px 0 0;
1973 - height: 15px;
1974 -}
1975 -
1976 -
1977 -/* Icon video / YouTube inside the floating ball */
1978 -#wp-chatbot-ball .wp-chatbot-ball .wpbot-icon-video,
1979 -.wp-chatbot-ball .wpbot-icon-video {
1980 - position: absolute;
1981 - top: 0;
1982 - left: 0;
1983 - width: 100% !important;
1984 - height: 100% !important;
1985 - border-radius: 50%;
1986 - object-fit: cover;
1987 - pointer-events: none;
1988 - box-sizing: border-box;
1989 - z-index: 0;
1990 -}
1991 -
1992 -/*
1993 - * YouTube iframes ignore object-fit and letterbox in a square ball.
1994 - * Size as 16:9 cover, then scale up so title / logo / chrome are cropped by the circle.
1995 - */
1996 -#wp-chatbot-ball .wp-chatbot-ball iframe.wpbot-icon-video,
1997 -.wp-chatbot-ball iframe.wpbot-icon-video {
1998 - top: 50%;
1999 - left: 50%;
2000 - width: 100% !important; /* 16 / 9 */
2001 - height: 100% !important;
2002 - min-height: 100%;
2003 - border: 0;
2004 - transform: translate(-50%, -50%) scale(1);
2005 - transform-origin: center center;
2006 - object-fit: unset;
2007 - pointer-events: none;
2008 -}
2009 -
2010 -.wp-chatbot-ball-animator {
2011 - position: relative;
2012 - border-radius: 50%;
2013 - z-index: 1;
2014 -}
2015 -
2016 -.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch {
2017 - opacity: 1;
2018 - width: 100%;
2019 - height: 100%;
2020 - position: absolute;
2021 - animation: spin 2s linear infinite;
2022 - border: 3px solid transparent;
2023 - border-top-color: #9370DB;
2024 -}
2025 -
2026 -.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:before {
2027 - content: "";
2028 - position: absolute;
2029 - top: -9px;
2030 - left: -9px;
2031 - right: -9px;
2032 - bottom: -9px;
2033 - border-radius: 50%;
2034 - border: 3px solid transparent;
2035 - border-top-color: #BA55D3;
2036 - animation: spin 3s linear infinite;
2037 -}
2038 -
2039 -.wp-chatbot-animation-active .wp-chatbot-ball-animation-switch:after {
2040 - content: "";
2041 - position: absolute;
2042 - top: -15px;
2043 - left: -15px;
2044 - right: -15px;
2045 - bottom: -15px;
2046 - border-radius: 50%;
2047 - border: 3px solid transparent;
2048 - border-top-color: #FF00FF;
2049 - animation: spin 1.5s linear infinite;
2050 -}
2051 -
2052 -@keyframes spin {
2053 - 0% {
2054 - -webkit-transform: rotate(0deg);
2055 - -ms-transform: rotate(0deg);
2056 - transform: rotate(0deg);
2057 - }
2058 -
2059 - 100% {
2060 - -webkit-transform: rotate(360deg);
2061 - -ms-transform: rotate(360deg);
2062 - transform: rotate(360deg);
2063 - }
2064 -}
2065 -
2066 -@keyframes spinHide {
2067 - 0% {
2068 - opacity: 0;
2069 - }
2070 -
2071 - 100% {
2072 - opacity: 0;
2073 - }
2074 -}
2075 -
2076 -@media screen and (min-height: 1281px) {
2077 - div#wp-chatbot-chat-container .slimScrollDiv {
2078 - height: 100vh !important;
2079 - max-height: 680px !important;
2080 - }
2081 - div#wp-chatbot-chat-container div#wp-chatbot-board-container {
2082 - height: 100vh !important;
2083 - max-height: 850px !important;
2084 - }
2085 -}
2086 -
2087 -@media screen and (max-width: 1024px) {
2088 - div#wp-chatbot-chat-container {
2089 - right: 30px !important;
2090 - bottom: 30px !important;
2091 - left: auto !important;
2092 - }
2093 - div#wp-chatbot-mobile-close {
2094 - display: none;
2095 - }
2096 -}
2097 -@media screen and (max-width: 767px) {
2098 - body div#wp-chatbot-ball-container {
2099 - max-width: 100%;
2100 - margin: 0 auto 3px auto;
2101 - width: 100%;
2102 - }
2103 -}
2104 -
2105 -@media screen and (max-width: 480px) {
2106 - div#wp-chatbot-chat-container {
2107 - right: 0px !important;
2108 - bottom: 0px !important;
2109 - left: auto !important;
2110 - }
2111 - /* Full width only below 480px while open (incl. after reset/reload) */
2112 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open {
2113 - left: 0 !important;
2114 - right: 0 !important;
2115 - bottom: 0 !important;
2116 - width: 100% !important;
2117 - max-width: 100% !important;
2118 - }
2119 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2120 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-board-container,
2121 - .wp-chatbot-template-01 div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2122 - .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2123 - .wp-chatbot-template-01 .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2124 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .slimScrollDiv,
2125 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-ball-inner {
2126 - width: 100% !important;
2127 - max-width: 100% !important;
2128 - }
2129 - div#wp-chatbot-ball {
2130 - right: 30px;
2131 - bottom: 30px;
2132 - position: relative;
2133 -}
2134 -}
2135 -@media screen and (min-height: 1281px) {
2136 - body .wp-chatbot-ball-inner.wp-chatbot-content {
2137 - height: 660px !important; max-height: 660px !important;
2138 - }
2139 -}