PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 3.6.0
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v3.6.0
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 +46 -671 8.7.53.6.0 View file →
@@ -139,17 +139,15 @@
139 139 width: 60px;
140 140 height: 60px;
141 141 border-radius: 50%;
142 142 margin-top: 10px;
143 - box-shadow: #767580 0px 4px 20px;
144 143 }
145 144
146 145 #wp-chatbot-ball .wp-chatbot-ball img {
147 - width: 56px !important;
148 - height: 56px !important;
146 + width: 60px !important;
147 + height: 60px !important;
149 148 display: block;
150 149 border-radius: 50%;
151 - margin: 2px ;
152 150 }
153 151
154 152 .wp-chatbot-ball-animator {
155 153 position: relative;
@@ -190,11 +188,9 @@
190 188 border: 3px solid transparent;
191 189 border-top-color: #FF00FF;
192 190 animation: spin 1.5s linear infinite;
193 191 }
194 -.wp-chatbot-footer div#wp-chatbot-editor-container {
195 - display: flex;
196 -}
192 +
197 193 @keyframes spin {
198 194 0% {
199 195 -webkit-transform: rotate(0deg);
200 196 -ms-transform: rotate(0deg);
@@ -232,17 +228,8 @@
232 228 display: inline-block;
233 229 vertical-align: top;
234 230 }
235 231
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 232 .wp-chatbot-header {
246 233 border-radius: 5px 5px 0 0;
247 234 margin: 0;
248 235 padding: 15px 15px;
@@ -256,11 +243,13 @@
256 243 padding: 0 !important;
257 244 }
258 245
259 246 .wp-chatbot-content {
247 + height: calc(100vh - 277px);
260 248 position: relative;
261 249 padding: 15px;
262 250 box-sizing: border-box;
251 + max-height: 564px;
263 252 }
264 253
265 254 .wp-chatbot-product-reload.wp-chatbot-product-loading {
266 255 display: block;
@@ -380,11 +369,10 @@
380 369 display: none;
381 370 }
382 371
383 372 #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;
373 + width: 40px !important;
374 + height: 40px !important;
387 375 }
388 376
389 377 /*********************************************************************************
390 378 4. Tab
@@ -540,8 +528,33 @@
540 528 box-shadow: none;
541 529 background: none;
542 530 }
543 531
532 +.wp-chatbot-editor-container button {
533 + display: inline-block;
534 + height: 40px;
535 + background: transparent url("../images/send-button.png") no-repeat center;
536 + color: transparent;
537 + width: 20%;
538 + cursor: pointer;
539 + margin: 0 0 0 -8px;
540 + padding: 0;
541 + border: none;
542 + outline: none;
543 +}
544 +
545 +.wp-chatbot-editor-container button:hover {
546 + background: transparent url("../images/send-button.png") no-repeat center;
547 + color: transparent;
548 +}
549 +
550 +.wp-chatbot-editor-container button:focus {
551 + outline: none;
552 + border: none;
553 + box-shadow: none;
554 + background: transparent url("../images/send-button.png") no-repeat center;
555 +}
556 +
544 557 /*****************************************************************************************
545 558 6. Message Item
546 559 *********************************************************************************************/
547 560 /*Load More Product*/
@@ -1216,30 +1229,8 @@
1216 1229 .wp-chatbot-notification-message {
1217 1230 transition: opacity 0.5s;
1218 1231 }
1219 1232
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 1233 #wp-chatbot-desktop-close {
1243 1234 display: block;
1244 1235 position: absolute;
1245 1236 right: 3px;
@@ -1249,9 +1240,9 @@
1249 1240 line-height: 20px;
1250 1241 top: -20px;
1251 1242 width: 30px;
1252 1243 height: 30px;
1253 - background-color: transparent;
1244 + background-color: #7d8999;
1254 1245 border-radius: 50%;
1255 1246 color: #ffffff;
1256 1247 cursor: pointer;
1257 1248 text-align: center;
@@ -1300,11 +1291,9 @@
1300 1291 .wp-chatbot-notification-container:hover .wp-chatbot-notification-close {
1301 1292 visibility: visible;
1302 1293 transform: translateY(0px);
1303 1294 }
1304 -ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph{
1305 - display: block !important;
1306 -}
1295 +
1307 1296 .wp-chatbot-ball-cart-items {
1308 1297 bottom: -8px;
1309 1298 left: -11px;
1310 1299 position: absolute;
@@ -1370,11 +1359,9 @@
1370 1359 background-position: 0 -80px;
1371 1360 border: none !important;
1372 1361 box-shadow: none !important;
1373 1362 }
1374 -.swal2-container {
1375 - z-index: 99999999;
1376 -}
1363 +
1377 1364 .facebook-messenger {
1378 1365 background-position: 0 -80px;
1379 1366 }
1380 1367
@@ -1410,112 +1397,8 @@
1410 1397 .fb_dialog > .fb_dialog_content {
1411 1398 opacity: 0.01;
1412 1399 }
1413 1400
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 1401 /****************************************************************************************************
1519 1402 11 Responsive
1520 1403 ****************************************************************************************************/
1521 1404 @media screen and (max-width: 1200px) {
@@ -1560,12 +1443,8 @@
1560 1443 }
1561 1444
1562 1445
1563 1446 @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 1447 .wp-chatbot-header {
1569 1448 padding-left: 50px;
1570 1449 padding-right: 50px;
1571 1450 }
@@ -1572,9 +1451,14 @@
1572 1451
1573 1452 .wp-chatbot-board-container{
1574 1453 width: 310px;
1575 1454 }
1455 + .wp-chatbot-mobile-full-screen .wp-chatbot-board-container {
1456 + width: 100%;
1457 + }
1576 1458
1459 +
1460 +
1577 1461 #wp-chatbot-mobile-close {
1578 1462 position: absolute;
1579 1463 right: 12px;
1580 1464 top: 9px;
@@ -1584,11 +1468,8 @@
1584 1468 height: 30px;
1585 1469 cursor: pointer;
1586 1470 color: transparent;
1587 1471 }
1588 - #wp-chatbot-mobile-close{
1589 - display: none;
1590 - }
1591 1472
1592 1473
1593 1474
1594 1475 .wp-chatbot-notification-close {
@@ -1613,9 +1494,9 @@
1613 1494 display: inline-block !important;
1614 1495 }
1615 1496
1616 1497 .wp-chatbot-header {
1617 - padding-top: 15px;
1498 + padding-top: 50px;
1618 1499 }
1619 1500
1620 1501 #wp-chatbot-chat-container {
1621 1502 right: 30px;
@@ -1634,517 +1515,11 @@
1634 1515 .wp-chatbot-notification-container {
1635 1516 width: 250px;
1636 1517 padding-top: 55px;
1637 1518 }
1638 - .wp-chatbot-mobile-full-screen .wp-chatbot-header{
1639 - padding-top: 15px !important;
1640 - }
1641 1519 }
1642 -.wpb-search-result a{
1643 - display: block;
1520 +.wpb-search-result{}
1521 +.wpb-search-result p{}
1522 +.wpb-search-result a{display: block;
1644 1523 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 -}
1671 -
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 -span.qcld-chatbot-wildcard.qcld_back_to_start {
2077 - text-align: center;
2078 - margin: 0 auto;
2079 - display: block;
2080 - max-width: 120px;
2081 -}
2082 -.chat-container.wp-chatbot-msg-flat:has(.qcld_back_to_start) {
2083 - box-shadow: none !important;
2084 - background: rgb(255 255 255 / 0%) !important;
2085 -}
2086 -
2087 -@media screen and (min-height: 1281px) {
2088 - div#wp-chatbot-chat-container .slimScrollDiv {
2089 - height: 100vh !important;
2090 - max-height: 680px !important;
2091 - }
2092 - div#wp-chatbot-chat-container div#wp-chatbot-board-container {
2093 - height: 100vh !important;
2094 - max-height: 850px !important;
2095 - }
2096 -}
2097 -
2098 -@media screen and (max-width: 1024px) {
2099 - div#wp-chatbot-chat-container {
2100 - right: 30px !important;
2101 - bottom: 30px !important;
2102 - left: auto !important;
2103 - }
2104 - div#wp-chatbot-mobile-close {
2105 - display: none;
2106 - }
2107 -}
2108 -@media screen and (max-width: 767px) {
2109 - body div#wp-chatbot-ball-container {
2110 - max-width: 100%;
2111 - margin: 0 auto 3px auto;
2112 - width: 100%;
2113 - }
2114 -}
2115 -
2116 -@media screen and (max-width: 480px) {
2117 - div#wp-chatbot-chat-container {
2118 - right: 0px !important;
2119 - bottom: 0px !important;
2120 - left: auto !important;
2121 - }
2122 - /* Full width only below 480px while open (incl. after reset/reload) */
2123 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open {
2124 - left: 0 !important;
2125 - right: 0 !important;
2126 - bottom: 0 !important;
2127 - width: 100% !important;
2128 - max-width: 100% !important;
2129 - }
2130 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2131 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-board-container,
2132 - .wp-chatbot-template-01 div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2133 - .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2134 - .wp-chatbot-template-01 .wp-chatbot-mobile-full-screen.wp-chatbot-mobile-fs-open #wp-chatbot-board-container,
2135 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .slimScrollDiv,
2136 - div#wp-chatbot-chat-container.wp-chatbot-mobile-fs-open .wp-chatbot-ball-inner {
2137 - width: 100% !important;
2138 - max-width: 100% !important;
2139 - }
2140 - div#wp-chatbot-ball {
2141 - right: 30px;
2142 - bottom: 30px;
2143 - position: relative;
2144 -}
2145 -}
2146 -@media screen and (min-height: 1281px) {
2147 - body .wp-chatbot-ball-inner.wp-chatbot-content {
2148 - height: 660px !important; max-height: 660px !important;
2149 - }
2150 -}
1524 + margin-bottom: 7px;
1525 + padding: 5px;}