PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.8.0
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.8.0
8.8.0 8.7.9 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 All 536 releases
← All changes | templates/template-01/style.css +1215 -1117 8.5.9 → 8.8.0 View file →
@@ -1,1118 +1,1216 @@
1 -/*
2 -
3 -01. Ball content
4 -
5 -02. wp Chat bot Message container
6 -
7 - -A Link Item
8 -
9 - -B Loading
10 -
11 -03. wp Chat bot Message Editor
12 -
13 -04. wp Chat bottom Tab Nav Editor
14 -
15 -05. Tab Feature Product
16 -
17 -06. Tab Cart
18 -
19 -07. Product Details
20 -
21 -*/
22 -
23 -
24 -
25 -/*********************
26 -
27 -01. Ball content wrapper
28 -
29 -**********************/
30 -
31 -.wp-chatbot-board-container {
32 -
33 - border-radius: 5px;
34 -
35 - box-shadow: 0 5px 40px rgba(0, 0, 0, .10);
36 -
37 - background: #deebe9 url("../../images/tpl-one-header.png") no-repeat top center;
38 -
39 - background-size: contain;
40 - box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
41 - border-radius: 8px;
42 -}
43 -
44 -
45 -
46 -/******************************
47 -
48 -02. wp Chat bot Message container
49 -
50 -*********************************/
51 -
52 -
53 -
54 -.wp-chatbot-header {
55 -
56 - background-color: #70aca9;
57 -
58 -}
59 -
60 -
61 -
62 -.wp-chatbot-header h3 {
63 -
64 - color: #ffffff;
65 -
66 - font-size: 18px !important;
67 -
68 - letter-spacing: 1px;
69 -
70 -}
71 -
72 -ul.wp-chatbot-messages-container > li {
73 -
74 - margin-bottom: 10px;
75 -
76 - padding-top: 0;
77 -
78 - font-size: 14px;
79 -
80 -}
81 -
82 -
83 -
84 -ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
85 -
86 - padding-left: 50px;
87 -
88 -}
89 -
90 -
91 -
92 -ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
93 -
94 - padding-right: 50px;
95 -
96 -}
97 -
98 -
99 -
100 -ul.wp-chatbot-messages-container > li:first-child {
101 -
102 - padding: 0;
103 -
104 -}
105 -
106 -
107 -
108 -ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
109 -
110 - position: absolute;
111 -
112 - border-radius: 50%;
113 -
114 - overflow: hidden;
115 -
116 - width: 40px;
117 -
118 - height: 40px;
119 -
120 - top: 0;
121 -
122 -}
123 -
124 -
125 -
126 -ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
127 -
128 - left: 0;
129 -
130 -}
131 -
132 -
133 -
134 -ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
135 -
136 - right: 0;
137 -
138 -}
139 -
140 -
141 -
142 -ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-bubble {
143 -
144 - display: table;
145 -
146 - padding: 8px 15px;
147 -
148 - max-width: 90%;
149 -
150 - background-color: #fff;
151 -
152 - border-radius: 10px;
153 -
154 - line-height: 150%;
155 -
156 - -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7)"; /*IE 8*/
157 -
158 - -moz-box-shadow: 1px 1px 1px #77bdb7; /*FF 3.5+*/
159 -
160 - -webkit-box-shadow: 1px 1px 1px #77bdb7; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
161 -
162 - box-shadow: 1px 1px 1px #77bdb7; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
163 -
164 - filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7); /*IE 5.5-7*/
165 -
166 -
167 -
168 -}
169 -
170 -
171 -
172 -ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
173 -
174 -
175 - box-shadow: none;
176 -
177 -}
178 -
179 -
180 -
181 -ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
182 -
183 - text-align: right;
184 -
185 - float: right;
186 -
187 - border-radius: 10px 10px 10px 10px;
188 -
189 - color: #334155;
190 -
191 -}
192 -
193 -
194 -
195 -/************ 02.A Link Item*************/
196 -
197 -span.qcld-chatbot-product-category,
198 -
199 -span.qcld-chatbot-support-items,
200 -
201 -span.qcld-chatbot-wildcard,
202 -
203 -span.qcld-chatbot-suggest-email,
204 -
205 -span.qcld-chatbot-reset-btn,
206 -
207 -#wp-chatbot-loadmore {
208 -
209 - color: #000000;
210 - background-size: 200% auto;
211 - border: 1px solid #ffffff;
212 - background-color: #ffffff7d;
213 - display: inline-block;
214 - margin: 3px auto;
215 - padding: 6px 11px;
216 - margin-right: 4px;
217 -
218 -}
219 -
220 -
221 -
222 -span.qcld-chatbot-product-category:hover,
223 -
224 -span.qcld-chatbot-support-items:hover,
225 -
226 -span.qcld-chatbot-wildcard:hover,
227 -
228 -span.qcld-chatbot-suggest-email:hover,
229 -
230 -span.qcld-chatbot-reset-btn:hover,
231 -
232 -#wp-chatbot-loadmore:hover {
233 -
234 - background-position: right center;
235 -
236 - box-shadow: none;
237 - background-color: #a1c4fd;
238 -}
239 -
240 -
241 -
242 -/************* 02.B Loading **************/
243 -
244 -ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
245 -
246 - background-color: #fff;
247 -
248 - padding: 1px;
249 -
250 - border-radius: 5px;
251 -
252 - margin: 0 auto;
253 -
254 - display: block;
255 -
256 -}
257 -
258 -
259 -
260 -/*******************************
261 -
262 -03. wp Chat bot Message Editor
263 -
264 -**********************************/
265 -
266 -.wp-chatbot-editor-container {
267 -
268 - border-top: 1px solid #fff;
269 -
270 -
271 -
272 -}
273 -
274 -
275 -
276 -.wp-chatbot-editor-container input {
277 -
278 - color: #0a2d2b;
279 -
280 -}
281 -
282 -
283 -
284 -.wp-chatbot-editor-container input::placeholder {
285 -
286 - color: #0a2d2b;
287 -
288 -}
289 -
290 -
291 -
292 -.wp-chatbot-editor-container input::-webkit-input-placeholder {
293 -
294 - color: #0a2d2b;
295 -
296 -}
297 -
298 -
299 -
300 -.wp-chatbot-editor-container input::-moz-placeholder {
301 -
302 - color: #0a2d2b;
303 -
304 -}
305 -
306 -
307 -
308 -.wp-chatbot-editor-container input:-ms-input-placeholder {
309 -
310 - color: #0a2d2b;
311 -
312 -}
313 -
314 -
315 -
316 -.wp-chatbot-editor-container input:-moz-placeholder {
317 -
318 - color: #0a2d2b;
319 -
320 -}
321 -
322 -
323 -
324 -/*******************************
325 -
326 -04. wp Chat bottom Tab Nav Editor
327 -
328 -**********************************/
329 -
330 -.wp-chatbot-footer {
331 -
332 - background: url("../../images/tpl-one-footer.png") repeat-x left top;
333 -
334 - background-color: #9ec3c0;
335 -
336 - border-radius: 0 0 5px 5px;
337 -
338 -}
339 -
340 -
341 -
342 -.wp-chatbot-tab-nav {
343 -
344 - background-color: #9ec3c0;
345 -
346 -}
347 -
348 -
349 -
350 -.wp-chatbot-tab-nav ul li:before {
351 -
352 - background: linear-gradient(transparent 50%, #9ec3c0 50%);
353 -
354 - background-size: 200%, 100%;
355 -
356 -}
357 -
358 -
359 -
360 -/******************************************
361 -
362 -05. Tab Feature Product
363 -
364 -*********************************************/
365 -
366 -.wp-chatbot-agent-profile {
367 -
368 - position: relative;
369 -
370 - padding-left: 35px;
371 -
372 - padding-top: 30px;
373 -
374 - box-sizing: border-box;
375 -
376 - word-wrap: break-word;
377 -
378 - list-style: none;
379 -
380 - display: block;
381 -
382 - clear: both;
383 -
384 - line-height: 150%;
385 -
386 - min-height: 50px;
387 -
388 - margin: 0 0 10px 0;
389 -
390 -}
391 -
392 -
393 -
394 -.wp-chatbot-widget-title {
395 -
396 - color: #353535;
397 -
398 - text-align: center;
399 -
400 - padding-bottom: 10px;
401 -
402 -}
403 -
404 -
405 -
406 -/*************************************
407 -
408 -06. Tab Cart
409 -
410 -**************************************/
411 -
412 -.wp-chatbot-cart-header {
413 -
414 - background-color: #F5F5F5;
415 -
416 -}
417 -
418 -
419 -
420 -.wp-chatbot-cart-single {
421 -
422 - background-color: rgba(245, 245, 245, 0.1);
423 -
424 - border-bottom: 1px solid #dddddd;
425 -
426 -}
427 -
428 -
429 -
430 -.wp-chatbot-cart-single:nth-child(2n+1) {
431 -
432 - background-color: rgba(245, 245, 245, 0.5);
433 -
434 -}
435 -
436 -
437 -
438 -.wp-chatbot-cart-footer div a {
439 -
440 - text-decoration: none;
441 -
442 - background: #70aca9;
443 -
444 - color: #ffffff;
445 -
446 -}
447 -
448 -
449 -
450 -.wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
451 -
452 - background: #5a8c89;
453 -
454 -}
455 -
456 -
457 -
458 -/***********************************
459 -
460 -07. Product Details
461 -
462 -************************************/
463 -
464 -.wp-chatbot-product-details {
465 -
466 - box-shadow: 0 0 10px #ccc;
467 -
468 - background-color: #deebe9;
469 -
470 -}
471 -
472 -
473 -
474 -.wp-chatbot-product-cart-button input[type="button"], #wp-chatbot-loadmore {
475 -
476 - border: 1px solid #70aca9;
477 -
478 - background: #70aca9;
479 -
480 - color: #ffffff;
481 -
482 - box-shadow: 0 0 2px #999;
483 -
484 -}
485 -
486 -
487 -
488 -.wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover {
489 -
490 - background: #5a8c89;
491 -
492 - color: #ffffff;
493 -
494 -}
495 -
496 -
497 -
498 -/*************************
499 -
500 -Right-to-left text direction
501 -
502 -**************************/
503 -
504 -.wp-chatbot-rtl {
505 -
506 - text-align: right;
507 -
508 - direction: RTL;
509 -
510 -}
511 -
512 -
513 -
514 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg, .wp-chatbot-rtl .wp-chatbot-agent-profile {
515 -
516 - padding: 0 50px 0 0;
517 -
518 -}
519 -
520 -
521 -
522 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
523 -
524 - padding: 0;
525 -
526 -}
527 -
528 -
529 -
530 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
531 -
532 - display: table;
533 -
534 - max-width: 90%;
535 -
536 - float: right;
537 -
538 - text-align: right;
539 -
540 -}
541 -
542 -
543 -
544 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
545 -
546 -.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
547 -
548 - right: 0;
549 -
550 - left: auto;
551 -
552 -}
553 -
554 -
555 -
556 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
557 -
558 - padding: 0 0 0 50px;
559 -
560 -}
561 -
562 -
563 -
564 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
565 -
566 - left: 0;
567 -
568 - right: auto;
569 -
570 -}
571 -
572 -
573 -
574 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
575 -
576 - display: table;
577 -
578 - max-width: 90%;
579 -
580 - float: left;
581 -
582 - text-align: left;
583 -
584 -}
585 -
586 -
587 -
588 -.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
589 -
590 - margin-left: 0;
591 -
592 -}
593 -
594 -
595 -
596 -.wp-chatbot-rtl .wp-chatbot-editor-container input {
597 -
598 - text-align: right;
599 -
600 - direction: RTL;
601 -
602 -}
603 -
604 -
605 -
606 -.wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
607 -
608 - margin: auto;
609 -
610 -}
611 -
612 -
613 -.wp-chatbot-rtl .wp-chatbot-products-area ul li {
614 -
615 - margin: 1%;
616 -
617 - vertical-align: middle;
618 -
619 -}
620 -
621 -.wp-chatbot-tab-nav ul li a[data-option="support"] {
622 - background-position: -169px -9px !important;
623 -}
624 -
625 -.wp-chatbot-template-01 .wpbot_card_caption span{
626 - color: #0c0c0c !important;
627 -}
628 -
629 -@media screen and (max-width: 768px) {
630 - .wp-chatbot-content {
631 - height: calc(100vh - 220px) !important;
632 - }
633 -}
634 -
635 -
636 -
637 -
638 -
639 -
640 -.wp-chatbot-template-001 .wpbot_card_image span {
641 - display: none !important;
642 -}
643 -.wp-chatbot-template-001 .wpbot_card_image a {
644 - display: flex !important;
645 - gap: 6px !important;
646 -}
647 -.wp-chatbot-template-001 .wpbot_card_image.wpbot_card_image_saas a{
648 - display: flex !important;
649 - gap: 6px !important;
650 -}
651 -.wp-chatbot-template-001 .wpbot_card_image img{
652 - max-width: 25px !important;
653 - height: 25px !important;
654 - border-radius: 50%;
655 -}
656 -.wp-chatbot-template-001 .wpbot_card_caption.wpbot_card_caption_saas span {
657 - display: flex !important;
658 - gap: 10px !important;
659 - margin: 0 10px 0 0 !important;
660 -}
661 -.wp-chatbot-template-001 .wpbot_card_image.wpbot_card_image_saas .wpbot_card_caption.wpbot_card_caption_saas p {
662 - display: flex;
663 -}
664 -.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper {
665 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
666 - background: rgb(255 255 255 / 30%);
667 - backdrop-filter: blur(0px);
668 - isolation: isolate;
669 - margin: 5px 0;
670 - padding: 5px;
671 -}
672 -.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper p.wpbot_card_caption_title{
673 - margin: 0;
674 - padding: 0;
675 - color: rgb(29 115 180) !important;
676 - font-weight: 600;
677 -}
678 -.wp-chatbot-template-001 .wpbot_card_caption.wpbot_card_caption_saas p.wpbot_card_description {
679 - padding: 0 0 0 28px;
680 -}
681 -.wp-chatbot-template-001 .wpbot_card_caption p.wpbot_card_description {
682 - margin: 0;
683 - padding: 0;
684 -}
685 -.wp-chatbot-template-001 .wp-chatbot-template-001 .wpbot_card_caption h2 {
686 - margin: 0;
687 - padding: 0;
688 - color: rgb(29 115 180) !important;
689 - font-weight: 600;
690 - font-size: 14px;
691 -}
692 -
693 -.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper a{
694 - text-decoration: none !important;
695 -}
696 -
697 -.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper a p:first-child {
698 - margin: 0;
699 - padding: 0;
700 - color: rgb(29 115 180) !important;
701 - font-weight: 600;
702 -}
703 -
704 -.wp-chatbot-template-001 .wpb-search-result a p {
705 - margin: 0;
706 -}
707 -
708 -.wp-chatbot-template-001 button.wp-chatbot-loadmore {
709 - color: #000000;
710 - background-size: 200% auto;
711 - border: 1px solid #ffffff;
712 - background-color: #9ec3c0;
713 - display: inline-block;
714 - margin: 3px auto;
715 - padding: 6px 11px;
716 - margin-right: 4px;
717 - border: 1px solid #eee;
718 - border-radius: 6px;
719 -}
720 -
721 -.wp-chatbot-avatar {
722 - margin: 0 !important;
723 -}
724 -
725 -
726 -.wp-chatbot-editor-container input {
727 - width: 100%;
728 -}
729 -.wp-chatbot-editor-container {
730 - border-top: 2px solid #9ec3c0;
731 - background: #eeeeee47;
732 - border-radius: 0;
733 -}
734 -
735 -.wp-chatbot-template-01 .wp-chatbot-board-container {
736 - width: 420px;
737 -}
738 -@media screen and (max-width: 480px) {
739 - .wp-chatbot-template-01 .wp-chatbot-board-container {
740 - width: 100%;
741 - }
742 - .wp-chatbot-template-01 #wp-chatbot-desktop-expand {
743 - display: none !important;
744 - }
745 -}
746 -
747 -/* Template-01 modern panel refresh */
748 -.wp-chatbot-template-01 .wp-chatbot-board-container {
749 - background: #eceef3;
750 - border-radius: 28px;
751 - overflow: hidden;
752 - box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
753 - transform-origin: 100% 100%;
754 - will-change: transform, opacity;
755 - transition: width 0.75s cubic-bezier(0.22, 0.78, 0.22, 1), max-width 0.75s cubic-bezier(0.22, 0.78, 0.22, 1);
756 - transform-origin: right bottom;
757 - transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-radius 0.35s ease, box-shadow 0.35s ease;
758 -
759 -
760 -
761 -}
762 -
763 -.wp-chatbot-template-01 .wp-chatbot-header {
764 - display: flex;
765 - align-items: center;
766 - justify-content: space-between;
767 - gap: 12px;
768 - background: transparent;
769 - padding: 18px 18px 12px;
770 -}
771 -
772 -.wp-chatbot-template-01 .wp-chatbot-header-left {
773 - display: flex;
774 - align-items: center;
775 - gap: 5px;
776 - min-width: 0;
777 -}
778 -
779 -.wp-chatbot-template-01 .wp-chatbot-header-left #wp-chatbot-desktop-expand {
780 - order: 0;
781 - margin-right: 2px;
782 -}
783 -
784 -.wp-chatbot-template-01 .wp-chatbot-header-avatar {
785 - width: 34px;
786 - height: 34px;
787 - border-radius: 50%;
788 - display: flex;
789 - align-items: center;
790 - justify-content: center;
791 -}
792 -
793 -.wp-chatbot-template-01 .wp-chatbot-header-avatar img {
794 - width: 34px;
795 - height: 34px;
796 - object-fit: contain;
797 -}
798 -
799 -.wp-chatbot-template-01 .wp-chatbot-header h3 {
800 - margin: 0;
801 - font-size: 14px !important;
802 - line-height: 1.2;
803 - font-weight: 400;
804 - color: #6b7280;
805 - letter-spacing: 0;
806 -}
807 -
808 -.wp-chatbot-template-01 .wp-chatbot-header h3 span {
809 - color: #111827;
810 - font-weight: 600;
811 -}
812 -
813 -.wp-chatbot-template-01 .wp-chatbot-header-actions {
814 - display: flex;
815 - align-items: center;
816 - gap: 8px;
817 - margin-left: auto;
818 -}
819 -
820 -.wp-chatbot-template-01 #wp-chatbot-desktop-reload,
821 -.wp-chatbot-template-01 #wp-chatbot-desktop-expand,
822 -.wp-chatbot-template-01 #wp-chatbot-desktop-close {
823 - position: static;
824 - transform: none;
825 - width: 34px;
826 - height: 34px;
827 - border-radius: 50%;
828 - background: #f3f4f6;
829 - color: #4b5563;
830 - display: inline-flex;
831 - align-items: center;
832 - justify-content: center;
833 - cursor: pointer;
834 - transition: background-color 0.2s ease, color 0.2s ease;
835 - padding: 0;
836 -}
837 -
838 -.wp-chatbot-template-01 #wp-chatbot-desktop-reload span,
839 -.wp-chatbot-template-01 #wp-chatbot-desktop-expand span,
840 -.wp-chatbot-template-01 #wp-chatbot-desktop-close span {
841 - position: static;
842 - top: auto;
843 - font-size: 18px;
844 - width: 18px;
845 - height: 18px;
846 -}
847 -
848 -.wp-chatbot-template-01 #wp-chatbot-desktop-reload:hover,
849 -.wp-chatbot-template-01 #wp-chatbot-desktop-expand:hover,
850 -.wp-chatbot-template-01 #wp-chatbot-desktop-close:hover {
851 - background: #e5e7eb;
852 - color: #111827;
853 -}
854 -
855 -.wp-chatbot-template-01 .wp-chatbot-content {
856 - background: transparent;
857 - padding: 6px 18px 0;
858 -}
859 -
860 -.wp-chatbot-template-01 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
861 -.wp-chatbot-template-01 .wp-chatbot-bubble {
862 - border-radius: 14px;
863 - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
864 -}
865 -
866 -.wp-chatbot-template-01 .wp-chatbot-footer,
867 -.wp-chatbot-template-01 .wp-chatbot-tab-nav {
868 - background: transparent;
869 -}
870 -
871 -.wp-chatbot-template-01 .wp-chatbot-editor-container {
872 - margin: 14px 16px 16px;
873 - border: 0;
874 - border-radius: 999px;
875 - background: #ffffff;
876 - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
877 - padding-right: 6px;
878 -}
879 -
880 -.wp-chatbot-template-01 .wp-chatbot-editor-container input {
881 - width: calc(100% - 42px);
882 - color: #6b7280;
883 - padding-left: 0;
884 -}
885 -
886 -.wp-chatbot-template-01 .wp-chatbot-editor-container input::placeholder {
887 - color: #9ca3af;
888 -}
889 -
890 -.wp-chatbot-template-01 button#wp-chatbot-send-message {
891 - border: none;
892 -}
893 -
894 -.wp-chatbot-template-01 .wp-chatbot-tab-nav {
895 - display: none;
896 -}
897 -
898 -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded {
899 - max-width: calc(100vw - 40px);
900 - width: min(92vw, 620px) !important;
901 -
902 -}
903 -
904 -@keyframes wpbotOpenRightToTopLeft {
905 - 0% {
906 - opacity: 0.8;
907 - transform: translate3d(26px, 22px, 0) scale(0.9);
908 - }
909 - 100% {
910 - opacity: 1;
911 - transform: translate3d(0, 0, 0) scale(1);
912 - }
913 -}
914 -
915 -@keyframes wpbotExpandMotion {
916 - 0% {
917 - opacity: 0;
918 - transform: translate3d(0, 20px, 0) scale(0.96);
919 - }
920 - 70% {
921 - opacity: 1;
922 - transform: translate3d(0, -2px, 0) scale(1.002);
923 - }
924 - 100% {
925 - opacity: 1;
926 - transform: translate3d(0, 0, 0) scale(1);
927 - }
928 -}
929 -
930 -@keyframes wpbotCollapseMotion {
931 - 0% {
932 - opacity: 1;
933 - transform: translate3d(0, 0, 0) scale(1);
934 - }
935 - 100% {
936 - opacity: 0;
937 - transform: translate3d(0, 16px, 0) scale(0.97);
938 - }
939 -}
940 -
941 -@keyframes wpbotCloseMotion {
942 - 0% {
943 - opacity: 1;
944 - transform: translate3d(0, 0, 0) scale(1);
945 - }
946 - 100% {
947 - opacity: 0;
948 - transform: translate3d(0, 22px, 0) scale(0.95);
949 - }
950 -}
951 -
952 -@keyframes wpbotTapMotion {
953 - 0% {
954 - transform: translate3d(28px, 30px, 0) scale(0.97);
955 - }
956 - 70% {
957 - transform: translate3d(-3px, -4px, 0) scale(1.003);
958 - }
959 - 100% {
960 - transform: translate3d(0, 0, 0) scale(1);
961 - }
962 -}
963 -
964 -.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim {
965 - animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
966 -}
967 -
968 -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expand-anim {
969 - animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
970 -}
971 -
972 -.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-collapse-anim {
973 - animation: wpbotCollapseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
974 -}
975 -
976 -.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
977 - animation: wpbotCloseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
978 -}
979 -
980 -.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-tap-anim {
981 - animation: wpbotTapMotion 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
982 -}
983 -.wp-chatbot-template-01 button#wp-chatbot-send-message span.dashicons.dashicons-arrow-up-alt::before {
984 - color: #000;
985 -}
986 -.wp-chatbot-template-01 button#wp-chatbot-send-message {
987 - background: transparent;
988 - margin: 0;
989 - padding: 0;
990 -}
991 -
992 -.wp-chatbot-template-01 button#wp-chatbot-send-message span {
993 - background: #eee;
994 - width: 38px;
995 - height: 38px;
996 - line-height: 36px;
997 - border-radius: 50%;
998 -}
999 -
1000 -
1001 -.wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:hover, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:focus, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:active {
1002 - -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
1003 - -webkit-text-fill-color: #242a34 !important;
1004 - box-shadow: 0 0 0 1000px #ffffff inset !important;
1005 - transition: background-color 9999s ease-out 0s;
1006 -}
1007 -
1008 -.wp-chatbot-send-message-active span{
1009 - background: #1e74b3 !important;
1010 - color: #fff !important;
1011 -}
1012 -
1013 -.wp-chatbot-send-message-active span.dashicons.dashicons-arrow-up-alt::before{
1014 - color: #fff !important;
1015 -}
1016 -.wp-chatbot-board-container.active-chat-board.wp-chatbot-expanded .dashicons-fullscreen-alt:before {
1017 - content: "\f189";
1018 -}
1019 -
1020 -
1021 -.wp-chatbot-rtl .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1022 - right: 95px;
1023 -}
1024 -
1025 -
1026 -
1027 -
1028 -
1029 -
1030 -
1031 -
1032 -
1033 -
1034 -
1035 -
1036 -.wp-chatbot-avatar-hidden .wp-chatbot-avatar {
1037 - display: none;
1038 -}
1039 -.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1040 - padding-left: 0;
1041 -}
1042 -
1043 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1044 - padding-left: 0px;
1045 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1046 - background: rgb(255 255 255 / 30%);
1047 - backdrop-filter: blur(0px);
1048 - isolation: isolate;
1049 - border-radius: 10px;
1050 - padding: 8px 15px;
1051 - min-height: auto;
1052 -}
1053 -
1054 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1055 - box-shadow: none;
1056 - background: rgba(255, 255, 255, 0);
1057 - backdrop-filter: none;
1058 - isolation: isolate;
1059 - border-radius: 0px;
1060 - padding: 0;
1061 -}
1062 -
1063 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar{
1064 - position: relative;
1065 -}
1066 -
1067 -.wp-chatbot-avatar-inside .wp-chatbot-avatar img, .wp-chatbot-avatar-inside .wp-chatbot-widget-avatar img {
1068 - width: 32px !important;
1069 - height: 32px !important;
1070 - object-fit: cover;
1071 -}
1072 -
1073 -
1074 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1075 - padding-right: 0;
1076 -}
1077 -
1078 -
1079 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1080 - padding-left: 0px;
1081 - box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1082 - background: rgb(255 255 255 / 30%);
1083 - backdrop-filter: blur(0px);
1084 - isolation: isolate;
1085 - border-radius: 10px;
1086 - padding: 8px 15px;
1087 - min-height: auto;
1088 - display: flex;
1089 - flex-direction: column;
1090 - align-content: flex-end;
1091 - flex-wrap: wrap;
1092 -}
1093 -
1094 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
1095 - box-shadow: none;
1096 - background: rgba(255, 255, 255, 0);
1097 - backdrop-filter: none;
1098 - isolation: isolate;
1099 - border-radius: 0px;
1100 - padding: 0;
1101 -}
1102 -
1103 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
1104 - width: 32px;
1105 - height: 32px;
1106 - text-align: right;
1107 - margin:0 0 6px auto !important;
1108 -}
1109 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar {
1110 - position: relative;
1111 - border-radius: 0;
1112 -}
1113 -.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar img{
1114 - border-radius: 50%;
1115 -}
1116 -.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1117 - padding-right: 0;
1 +/*
2 +
3 +01. Ball content
4 +
5 +02. wp Chat bot Message container
6 +
7 + -A Link Item
8 +
9 + -B Loading
10 +
11 +03. wp Chat bot Message Editor
12 +
13 +04. wp Chat bottom Tab Nav Editor
14 +
15 +05. Tab Feature Product
16 +
17 +06. Tab Cart
18 +
19 +07. Product Details
20 +
21 +*/
22 +
23 +
24 +
25 +/*********************
26 +
27 +01. Ball content wrapper
28 +
29 +**********************/
30 +
31 +.wp-chatbot-board-container {
32 +
33 + border-radius: 5px;
34 +
35 + box-shadow: 0 5px 40px rgba(0, 0, 0, .10);
36 +
37 + background: #deebe9 url("../../images/tpl-one-header.png") no-repeat top center;
38 +
39 + background-size: contain;
40 + box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
41 + border-radius: 8px;
42 +}
43 +
44 +
45 +
46 +/******************************
47 +
48 +02. wp Chat bot Message container
49 +
50 +*********************************/
51 +
52 +
53 +
54 +.wp-chatbot-header {
55 +
56 + background-color: #70aca9;
57 +
58 +}
59 +
60 +
61 +
62 +.wp-chatbot-header h3 {
63 +
64 + color: #ffffff;
65 +
66 + font-size: 18px !important;
67 +
68 + letter-spacing: 1px;
69 +
70 +}
71 +
72 +ul.wp-chatbot-messages-container > li {
73 +
74 + margin-bottom: 10px;
75 +
76 + padding-top: 0;
77 +
78 + font-size: 14px;
79 +
80 +}
81 +
82 +
83 +
84 +ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
85 +
86 + padding-left: 50px;
87 +
88 +}
89 +
90 +
91 +
92 +ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
93 +
94 + padding-right: 50px;
95 +
96 +}
97 +
98 +
99 +
100 +ul.wp-chatbot-messages-container > li:first-child {
101 +
102 + padding: 0;
103 +
104 +}
105 +
106 +
107 +
108 +ul.wp-chatbot-messages-container > li > .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
109 +
110 + position: absolute;
111 +
112 + border-radius: 50%;
113 +
114 + overflow: hidden;
115 +
116 + width: 40px;
117 +
118 + height: 40px;
119 +
120 + top: 0;
121 +
122 +}
123 +
124 +
125 +
126 +ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
127 +
128 + left: 0;
129 +
130 +}
131 +
132 +
133 +
134 +ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
135 +
136 + right: 0;
137 +
138 +}
139 +
140 +
141 +
142 +ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-bubble {
143 +
144 + display: table;
145 +
146 + padding: 8px 15px;
147 +
148 + max-width: 90%;
149 +
150 + background-color: #fff;
151 +
152 + border-radius: 10px;
153 +
154 + line-height: 150%;
155 +
156 + -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7)"; /*IE 8*/
157 +
158 + -moz-box-shadow: 1px 1px 1px #77bdb7; /*FF 3.5+*/
159 +
160 + -webkit-box-shadow: 1px 1px 1px #77bdb7; /*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/
161 +
162 + box-shadow: 1px 1px 1px #77bdb7; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
163 +
164 + filter: progid:DXImageTransform.Microsoft.Shadow(Strength=1, Direction=135, Color=#77bdb7); /*IE 5.5-7*/
165 +
166 +
167 +
168 +}
169 +
170 +
171 +
172 +ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
173 +
174 +
175 + box-shadow: none;
176 +
177 +}
178 +
179 +
180 +
181 +ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
182 +
183 + text-align: right;
184 +
185 + float: right;
186 +
187 + border-radius: 10px 10px 10px 10px;
188 +
189 + color: #334155;
190 +
191 +}
192 +
193 +
194 +
195 +/************ 02.A Link Item*************/
196 +
197 +span.qcld-chatbot-product-category,
198 +
199 +span.qcld-chatbot-support-items,
200 +
201 +span.qcld-chatbot-wildcard,
202 +
203 +span.qcld-chatbot-suggest-email,
204 +
205 +span.qcld-chatbot-reset-btn,
206 +
207 +#wp-chatbot-loadmore {
208 +
209 + color: #000000;
210 + background-size: 200% auto;
211 + border: 1px solid #ffffff;
212 + background-color: #ffffff7d;
213 + display: inline-block;
214 + margin: 3px auto;
215 + padding: 6px 11px;
216 + margin-right: 4px;
217 +
218 +}
219 +
220 +
221 +
222 +span.qcld-chatbot-product-category:hover,
223 +
224 +span.qcld-chatbot-support-items:hover,
225 +
226 +span.qcld-chatbot-wildcard:hover,
227 +
228 +span.qcld-chatbot-suggest-email:hover,
229 +
230 +span.qcld-chatbot-reset-btn:hover,
231 +
232 +#wp-chatbot-loadmore:hover {
233 +
234 + background-position: right center;
235 +
236 + box-shadow: none;
237 + background-color: #a1c4fd;
238 +}
239 +
240 +
241 +
242 +/************* 02.B Loading **************/
243 +
244 +ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
245 +
246 + background-color: #fff;
247 +
248 + padding: 1px;
249 +
250 + border-radius: 5px;
251 +
252 + margin: 0 auto;
253 +
254 + display: block;
255 +
256 +}
257 +
258 +
259 +
260 +/*******************************
261 +
262 +03. wp Chat bot Message Editor
263 +
264 +**********************************/
265 +
266 +.wp-chatbot-editor-container {
267 +
268 + border-top: 1px solid #fff;
269 +
270 +
271 +
272 +}
273 +
274 +
275 +
276 +.wp-chatbot-editor-container input {
277 +
278 + color: #0a2d2b;
279 +
280 +}
281 +
282 +
283 +
284 +.wp-chatbot-editor-container input::placeholder {
285 +
286 + color: #0a2d2b;
287 +
288 +}
289 +
290 +
291 +
292 +.wp-chatbot-editor-container input::-webkit-input-placeholder {
293 +
294 + color: #0a2d2b;
295 +
296 +}
297 +
298 +
299 +
300 +.wp-chatbot-editor-container input::-moz-placeholder {
301 +
302 + color: #0a2d2b;
303 +
304 +}
305 +
306 +
307 +
308 +.wp-chatbot-editor-container input:-ms-input-placeholder {
309 +
310 + color: #0a2d2b;
311 +
312 +}
313 +
314 +
315 +
316 +.wp-chatbot-editor-container input:-moz-placeholder {
317 +
318 + color: #0a2d2b;
319 +
320 +}
321 +
322 +
323 +
324 +/*******************************
325 +
326 +04. wp Chat bottom Tab Nav Editor
327 +
328 +**********************************/
329 +
330 +.wp-chatbot-footer {
331 +
332 + background: url("../../images/tpl-one-footer.png") repeat-x left top;
333 +
334 + background-color: #9ec3c0;
335 +
336 + border-radius: 0 0 5px 5px;
337 +
338 +}
339 +
340 +
341 +
342 +.wp-chatbot-tab-nav {
343 +
344 + background-color: #9ec3c0;
345 +
346 +}
347 +
348 +
349 +
350 +
351 +/******************************************
352 +
353 +05. Tab Feature Product
354 +
355 +*********************************************/
356 +
357 +.wp-chatbot-agent-profile {
358 +
359 + position: relative;
360 +
361 + padding-left: 35px;
362 +
363 + padding-top: 30px;
364 +
365 + box-sizing: border-box;
366 +
367 + word-wrap: break-word;
368 +
369 + list-style: none;
370 +
371 + display: block;
372 +
373 + clear: both;
374 +
375 + line-height: 150%;
376 +
377 + min-height: 50px;
378 +
379 + margin: 0 0 10px 0;
380 +
381 +}
382 +
383 +
384 +
385 +.wp-chatbot-widget-title {
386 +
387 + color: #353535;
388 +
389 + text-align: center;
390 +
391 + padding-bottom: 10px;
392 +
393 +}
394 +
395 +
396 +
397 +/*************************************
398 +
399 +06. Tab Cart
400 +
401 +**************************************/
402 +
403 +.wp-chatbot-cart-header {
404 +
405 + background-color: #F5F5F5;
406 +
407 +}
408 +
409 +
410 +
411 +.wp-chatbot-cart-single {
412 +
413 + background-color: rgba(245, 245, 245, 0.1);
414 +
415 + border-bottom: 1px solid #dddddd;
416 +
417 +}
418 +
419 +
420 +
421 +.wp-chatbot-cart-single:nth-child(2n+1) {
422 +
423 + background-color: rgba(245, 245, 245, 0.5);
424 +
425 +}
426 +
427 +
428 +
429 +.wp-chatbot-cart-footer div a {
430 +
431 + text-decoration: none;
432 +
433 + background: #70aca9;
434 +
435 + color: #ffffff;
436 +
437 +}
438 +
439 +
440 +
441 +.wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
442 +
443 + background: #5a8c89;
444 +
445 +}
446 +
447 +
448 +
449 +/***********************************
450 +
451 +07. Product Details
452 +
453 +************************************/
454 +
455 +.wp-chatbot-product-details {
456 +
457 + box-shadow: 0 0 10px #ccc;
458 +
459 + background-color: #deebe9;
460 +
461 +}
462 +
463 +
464 +
465 +.wp-chatbot-product-cart-button input[type="button"], #wp-chatbot-loadmore {
466 +
467 + border: 1px solid #70aca9;
468 +
469 + background: #70aca9;
470 +
471 + color: #ffffff;
472 +
473 + box-shadow: 0 0 2px #999;
474 +
475 +}
476 +
477 +
478 +
479 +.wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover {
480 +
481 + background: #5a8c89;
482 +
483 + color: #ffffff;
484 +
485 +}
486 +
487 +
488 +
489 +/*************************
490 +
491 +Right-to-left text direction
492 +
493 +**************************/
494 +
495 +.wp-chatbot-rtl {
496 +
497 + text-align: right;
498 +
499 + direction: RTL;
500 +
501 +}
502 +
503 +
504 +
505 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg, .wp-chatbot-rtl .wp-chatbot-agent-profile {
506 +
507 + padding: 0 50px 0 0;
508 +
509 +}
510 +
511 +
512 +
513 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
514 +
515 + padding: 0;
516 +
517 +}
518 +
519 +
520 +
521 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
522 +
523 + display: table;
524 +
525 + max-width: 90%;
526 +
527 + float: right;
528 +
529 + text-align: right;
530 +
531 +}
532 +
533 +
534 +
535 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
536 +
537 +.wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
538 +
539 + right: 0;
540 +
541 + left: auto;
542 +
543 +}
544 +
545 +
546 +
547 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
548 +
549 + padding: 0 0 0 50px;
550 +
551 +}
552 +
553 +
554 +
555 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
556 +
557 + left: 0;
558 +
559 + right: auto;
560 +
561 +}
562 +
563 +
564 +
565 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
566 +
567 + display: table;
568 +
569 + max-width: 90%;
570 +
571 + float: left;
572 +
573 + text-align: left;
574 +
575 +}
576 +
577 +
578 +
579 +.wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
580 +
581 + margin-left: 0;
582 +
583 +}
584 +
585 +
586 +
587 +.wp-chatbot-rtl .wp-chatbot-editor-container input {
588 +
589 + text-align: right;
590 +
591 + direction: RTL;
592 +
593 +}
594 +
595 +
596 +
597 +.wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
598 +
599 + margin: auto;
600 +
601 +}
602 +
603 +
604 +.wp-chatbot-rtl .wp-chatbot-products-area ul li {
605 +
606 + margin: 1%;
607 +
608 + vertical-align: middle;
609 +
610 +}
611 +
612 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="support"] {
613 + background-position: -166px -44px !important;
614 +}
615 +
616 +.wp-chatbot-template-01 .wp-chatbot-template-01 .wpbot_card_caption span{
617 + color: #0c0c0c !important;
618 +}
619 +
620 +
621 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
622 + background-position: -89px -48px;
623 +}
624 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
625 +
626 + width: 22px;
627 + height: 22px;
628 +}
629 +
630 +
631 +.wp-chatbot-template-01 span.chatbot_intent_reload {
632 + -webkit-transform: translate(0%, -50%);
633 + transform: translate(0%, -50%);
634 +}
635 +
636 +.wp-chatbot-template-001 .wpbot_card_image span {
637 + display: none !important;
638 +}
639 +.wp-chatbot-template-001 .wpbot_card_image a {
640 + display: flex !important;
641 + gap: 6px !important;
642 +}
643 +.wp-chatbot-template-001 .wpbot_card_image.wpbot_card_image_saas a{
644 + display: flex !important;
645 + gap: 6px !important;
646 +}
647 +.wp-chatbot-template-001 .wpbot_card_image img{
648 + max-width: 25px !important;
649 + height: 25px !important;
650 + border-radius: 50%;
651 +}
652 +.wp-chatbot-template-001 .wpbot_card_caption.wpbot_card_caption_saas span {
653 + display: flex !important;
654 + gap: 10px !important;
655 + margin: 0 10px 0 0 !important;
656 +}
657 +.wp-chatbot-template-001 .wpbot_card_image.wpbot_card_image_saas .wpbot_card_caption.wpbot_card_caption_saas p {
658 + display: flex;
659 +}
660 +.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper {
661 + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
662 + background: rgb(255 255 255 / 30%);
663 + backdrop-filter: blur(0px);
664 + isolation: isolate;
665 + margin: 5px 0;
666 + padding: 5px;
667 +}
668 +.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper p.wpbot_card_caption_title{
669 + margin: 0;
670 + padding: 0;
671 + color: rgb(29 115 180) !important;
672 + font-weight: 600;
673 +}
674 +.wp-chatbot-template-001 .wpbot_card_caption.wpbot_card_caption_saas p.wpbot_card_description {
675 + padding: 0 0 0 28px;
676 +}
677 +.wp-chatbot-template-001 .wpbot_card_caption p.wpbot_card_description {
678 + margin: 0;
679 + padding: 0;
680 +}
681 +.wp-chatbot-template-001 .wp-chatbot-template-001 .wpbot_card_caption h2 {
682 + margin: 0;
683 + padding: 0;
684 + color: rgb(29 115 180) !important;
685 + font-weight: 600;
686 + font-size: 14px;
687 +}
688 +
689 +.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper a{
690 + text-decoration: none !important;
691 +}
692 +
693 +.wp-chatbot-template-001 .wpb-search-result .wpbot_card_wraper a p:first-child {
694 + margin: 0;
695 + padding: 0;
696 + color: rgb(29 115 180) !important;
697 + font-weight: 600;
698 +}
699 +
700 +.wp-chatbot-template-001 .wpb-search-result a p {
701 + margin: 0;
702 +}
703 +
704 +.wp-chatbot-template-001 button.wp-chatbot-loadmore {
705 + color: #000000;
706 + background-size: 200% auto;
707 + border: 1px solid #ffffff;
708 + background-color: #9ec3c0;
709 + display: inline-block;
710 + margin: 3px auto;
711 + padding: 6px 11px;
712 + margin-right: 4px;
713 + border: 1px solid #eee;
714 + border-radius: 6px;
715 +}
716 +
717 +.wp-chatbot-avatar {
718 + margin: 0 !important;
719 +}
720 +
721 +
722 +.wp-chatbot-editor-container input {
723 + width: 100%;
724 +}
725 +.wp-chatbot-editor-container {
726 + border-top: 2px solid #9ec3c0;
727 + background: #eeeeee47;
728 + border-radius: 0;
729 +}
730 +
731 +.wp-chatbot-template-01 .wp-chatbot-board-container {
732 + width: 420px;
733 +}
734 +@media screen and (max-width: 480px) {
735 + .wp-chatbot-template-01 .wp-chatbot-board-container {
736 + width: 100%;
737 + }
738 + .wp-chatbot-template-01 #wp-chatbot-desktop-expand {
739 + display: none !important;
740 + }
741 +}
742 +
743 +/* Template-01 modern panel refresh */
744 +.wp-chatbot-template-01 .wp-chatbot-board-container {
745 + background-color: #eceef3;
746 + background-image: none;
747 + border-radius: 28px;
748 + overflow: hidden;
749 + box-shadow: 0 14px 35px rgba(16, 24, 40, 0.18);
750 + transform-origin: right bottom;
751 + position: relative;
752 + isolation: isolate;
753 + transform: translateZ(0);
754 + backface-visibility: hidden;
755 + -webkit-backface-visibility: hidden;
756 + transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
757 +}
758 +
759 +/* Stable bg layer — avoids white flash while width animates */
760 +.wp-chatbot-template-01 .wp-chatbot-board-container::before {
761 + content: "";
762 + position: absolute;
763 + inset: 0;
764 + z-index: 0;
765 + border-radius: inherit;
766 + background-color: #eceef3;
767 + background-size: cover;
768 + background-position: center;
769 + background-repeat: no-repeat;
770 + pointer-events: none;
771 +}
772 +
773 +.wp-chatbot-template-01 .wp-chatbot-board-container > * {
774 + position: relative;
775 + z-index: 1;
776 +}
777 +
778 +.wp-chatbot-template-01 .wp-chatbot-container {
779 + background-size: cover;
780 + background-position: center;
781 + background-repeat: no-repeat;
782 +}
783 +
784 +.wp-chatbot-template-01 .wp-chatbot-header {
785 + display: flex;
786 + align-items: center;
787 + justify-content: space-between;
788 + gap: 12px;
789 + background: transparent;
790 + padding: 18px 18px 12px;
791 +}
792 +
793 +.wp-chatbot-template-01 .wp-chatbot-header-left {
794 + display: flex;
795 + align-items: center;
796 + gap: 5px;
797 + min-width: 0;
798 +}
799 +
800 +.wp-chatbot-template-01 .wp-chatbot-header-left #wp-chatbot-desktop-expand {
801 + order: 0;
802 + margin-right: 2px;
803 +}
804 +
805 +.wp-chatbot-template-01 .wp-chatbot-header-avatar {
806 + width: 34px;
807 + height: 34px;
808 + border-radius: 50%;
809 + display: flex;
810 + align-items: center;
811 + justify-content: center;
812 +}
813 +
814 +.wp-chatbot-template-01 .wp-chatbot-header-avatar img {
815 + width: 34px;
816 + height: 34px;
817 + object-fit: contain;
818 +}
819 +
820 +.wp-chatbot-template-01 .wp-chatbot-header h3 {
821 + margin: 0;
822 + font-size: 14px !important;
823 + line-height: 1.2;
824 + font-weight: 400;
825 + color: #6b7280;
826 + letter-spacing: 0;
827 +}
828 +
829 +.wp-chatbot-template-01 .wp-chatbot-header h3 span {
830 + color: #111827;
831 + font-weight: 600;
832 +}
833 +
834 +.wp-chatbot-template-01 .wp-chatbot-header-actions {
835 + display: flex;
836 + align-items: center;
837 + gap: 8px;
838 + margin-left: auto;
839 +}
840 +
841 +.wp-chatbot-template-01 #wp-chatbot-desktop-reload,
842 +.wp-chatbot-template-01 #wp-chatbot-desktop-expand,
843 +.wp-chatbot-template-01 #wp-chatbot-desktop-close {
844 + position: static;
845 + transform: none;
846 + width: 34px;
847 + height: 34px;
848 + border-radius: 50%;
849 + background: #f3f4f6;
850 + color: #4b5563;
851 + display: inline-flex;
852 + align-items: center;
853 + justify-content: center;
854 + cursor: pointer;
855 + transition: background-color 0.2s ease, color 0.2s ease;
856 + padding: 0;
857 +}
858 +
859 +.wp-chatbot-template-01 #wp-chatbot-desktop-reload span,
860 +.wp-chatbot-template-01 #wp-chatbot-desktop-expand span,
861 +.wp-chatbot-template-01 #wp-chatbot-desktop-close span {
862 + position: static;
863 + top: auto;
864 + font-size: 18px;
865 + width: 18px;
866 + height: 18px;
867 +}
868 +
869 +.wp-chatbot-template-01 #wp-chatbot-desktop-reload:hover,
870 +.wp-chatbot-template-01 #wp-chatbot-desktop-expand:hover,
871 +.wp-chatbot-template-01 #wp-chatbot-desktop-close:hover {
872 + background: #e5e7eb;
873 + color: #111827;
874 +}
875 +
876 +.wp-chatbot-template-01 .wp-chatbot-content {
877 + background: transparent;
878 + padding: 6px 18px 0;
879 +}
880 +
881 +.wp-chatbot-template-01 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph,
882 +.wp-chatbot-template-01 .wp-chatbot-bubble {
883 + border-radius: 14px;
884 + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
885 +}
886 +
887 +.wp-chatbot-template-01 .wp-chatbot-footer,
888 +.wp-chatbot-template-01 .wp-chatbot-tab-nav {
889 + background: transparent;
890 +}
891 +
892 +.wp-chatbot-template-01 .wp-chatbot-editor-container {
893 + margin: 6px 16px 16px;
894 + border: 0;
895 + border-radius: 999px;
896 + background: #ffffff;
897 + box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
898 + padding-right: 6px;
899 +}
900 +
901 +.wp-chatbot-template-01 .wp-chatbot-editor-container input {
902 + width: calc(100% - 42px);
903 + color: #6b7280;
904 + padding-left: 0;
905 +}
906 +
907 +.wp-chatbot-template-01 .wp-chatbot-editor-container input::placeholder {
908 + color: #9ca3af;
909 +}
910 +
911 +.wp-chatbot-template-01 button#wp-chatbot-send-message {
912 + border: none;
913 +}
914 +
915 +
916 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul {
917 + margin: 5px 0 !important;
918 + padding: 0 !important;
919 + list-style: none;
920 + text-align: center;
921 + display: flex;
922 + gap: 30px;
923 + vertical-align: bottom;
924 + align-items: center;
925 + justify-content: center;
926 + width: 100%;
927 +}
928 +
929 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li {
930 + display: inline-block;
931 + vertical-align: middle;
932 + position: relative;
933 + transition: 0.2s;
934 + margin: 0 !important;
935 + padding: 0 !important;
936 +}
937 +
938 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="recent"] {
939 +
940 + background-position: -7px -47px;
941 +
942 +}
943 +
944 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="cart"] {
945 +
946 + background-position: -47px -47px;
947 +
948 +}
949 +
950 +
951 +
952 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="help"] {
953 +
954 + background-position: -129px -47px;
955 +
956 +}
957 +
958 +
959 +
960 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
961 +
962 + content: "";
963 +
964 + position: absolute;
965 +
966 + border-radius: 50%;
967 +
968 + border: 3px solid #1f8ceb;
969 +
970 + left: -9px;
971 +
972 + right: -9px;;
973 +
974 + bottom: -9px;
975 +
976 + top: -9px;
977 +
978 +}
979 +
980 +
981 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a {
982 + width: 32px;
983 + height: 32px;
984 + background: url(../../images/tab-btn-icon-new.png) no-repeat;
985 + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
986 + background-color: rgb(255 255 255 / 25%);
987 + backdrop-filter: blur(0px);
988 + isolation: isolate;
989 +
990 +
991 +}
992 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul li a[data-option="help"] {
993 + background-position: -125px -44px;
994 +}
995 +
996 +
997 +.wp-chatbot-template-01 .wp-chatbot-footer {
998 + margin: -10px 0 0 0;
999 +}
1000 +
1001 +.wp-chatbot-template-01 .wp-chatbot-tab-nav ul {
1002 + margin: -22px 0 5px 0 !important;
1003 +}
1004 +
1005 +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded,
1006 +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded {
1007 + max-width: calc(100vw - 40px);
1008 + width: min(92vw, 620px) !important;
1009 + /* Height comes from admin setting (+ bump) via inline CSS in qcld-wpwbot.php */
1010 +}
1011 +
1012 +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-content,
1013 +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-ball-inner,
1014 +.wp-chatbot-template-01 .wp-chatbot-board-container.wp-chatbot-expanded .slimScrollDiv,
1015 +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-content,
1016 +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .wp-chatbot-ball-inner,
1017 +.wp-chatbot-template-01 #wp-chatbot-board-container.wp-chatbot-expanded .slimScrollDiv {
1018 + transition: height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), max-height 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
1019 +}
1020 +
1021 +@keyframes wpbotOpenRightToTopLeft {
1022 + 0% {
1023 + opacity: 0.8;
1024 + transform: translate3d(26px, 22px, 0) scale(0.9);
1025 + }
1026 + 100% {
1027 + opacity: 1;
1028 + transform: translate3d(0, 0, 0) scale(1);
1029 + }
1030 +}
1031 +
1032 +@keyframes wpbotExpandMotion {
1033 + 0% {
1034 + opacity: 0;
1035 + transform: translate3d(0, 20px, 0) scale(0.96);
1036 + }
1037 + 70% {
1038 + opacity: 1;
1039 + transform: translate3d(0, -2px, 0) scale(1.002);
1040 + }
1041 + 100% {
1042 + opacity: 1;
1043 + transform: translate3d(0, 0, 0) scale(1);
1044 + }
1045 +}
1046 +
1047 +@keyframes wpbotCloseMotion {
1048 + 0% {
1049 + opacity: 1;
1050 + transform: translate3d(0, 0, 0) scale(1);
1051 + }
1052 + 100% {
1053 + opacity: 0;
1054 + transform: translate3d(0, 22px, 0) scale(0.95);
1055 + }
1056 +}
1057 +
1058 +@keyframes wpbotTapMotion {
1059 + 0% {
1060 + transform: translate3d(28px, 30px, 0) scale(0.97);
1061 + }
1062 + 70% {
1063 + transform: translate3d(-3px, -4px, 0) scale(1.003);
1064 + }
1065 + 100% {
1066 + transform: translate3d(0, 0, 0) scale(1);
1067 + }
1068 +}
1069 +
1070 +.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-open-anim {
1071 + animation: wpbotExpandMotion 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
1072 +}
1073 +
1074 +.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-close-anim {
1075 + animation: wpbotCloseMotion 0.28s cubic-bezier(0.4, 0, 1, 1) both;
1076 +}
1077 +
1078 +.wp-chatbot-template-01 .wp-chatbot-board-container.active-chat-board.wp-chatbot-tap-anim {
1079 + animation: wpbotTapMotion 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
1080 +}
1081 +.wp-chatbot-template-01 button#wp-chatbot-send-message span.dashicons.dashicons-arrow-up-alt::before {
1082 + color: #000;
1083 +}
1084 +.wp-chatbot-template-01 button#wp-chatbot-send-message {
1085 + background: transparent;
1086 + margin: 0;
1087 + padding: 0;
1088 +}
1089 +
1090 +.wp-chatbot-template-01 button#wp-chatbot-send-message span {
1091 + background: #eee;
1092 + width: 38px;
1093 + height: 38px;
1094 + line-height: 36px;
1095 + border-radius: 50%;
1096 +}
1097 +
1098 +
1099 +.wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:hover, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:focus, .wp-chatbot-template-01 .wp-chatbot-editor-container input:-webkit-autofill:active {
1100 + -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
1101 + -webkit-text-fill-color: #242a34 !important;
1102 + box-shadow: 0 0 0 1000px #ffffff inset !important;
1103 + transition: background-color 9999s ease-out 0s;
1104 +}
1105 +
1106 +.wp-chatbot-send-message-active span{
1107 + background: #1e74b3 !important;
1108 + color: #fff !important;
1109 +}
1110 +
1111 +.wp-chatbot-send-message-active span.dashicons.dashicons-arrow-up-alt::before{
1112 + color: #fff !important;
1113 +}
1114 +.wp-chatbot-board-container.active-chat-board.wp-chatbot-expanded .dashicons-fullscreen-alt:before {
1115 + content: "\f189";
1116 +}
1117 +
1118 +
1119 +.wp-chatbot-rtl .wp-chatbot-template-01 .wp-chatbot-header-icon-right {
1120 + right: 95px;
1121 +}
1122 +
1123 +
1124 +
1125 +
1126 +
1127 +
1128 +
1129 +
1130 +
1131 +
1132 +
1133 +
1134 +.wp-chatbot-avatar-hidden .wp-chatbot-avatar {
1135 + display: none;
1136 +}
1137 +.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1138 + padding-left: 0;
1139 +}
1140 +
1141 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
1142 + padding-left: 0px;
1143 + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1144 + background: rgb(255 255 255 / 30%);
1145 + backdrop-filter: blur(0px);
1146 + isolation: isolate;
1147 + border-radius: 10px;
1148 + padding: 8px 15px;
1149 + min-height: auto;
1150 +}
1151 +
1152 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container>li.wp-chatbot-msg .chat-container {
1153 + box-shadow: none;
1154 + background: rgba(255, 255, 255, 0);
1155 + backdrop-filter: none;
1156 + isolation: isolate;
1157 + border-radius: 0px;
1158 + padding: 0;
1159 +}
1160 +
1161 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar{
1162 + position: relative;
1163 +}
1164 +
1165 +.wp-chatbot-avatar-inside .wp-chatbot-avatar img, .wp-chatbot-avatar-inside .wp-chatbot-widget-avatar img {
1166 + width: 32px !important;
1167 + height: 32px !important;
1168 + object-fit: cover;
1169 +}
1170 +
1171 +
1172 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1173 + padding-right: 0;
1174 +}
1175 +
1176 +
1177 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1178 + padding-left: 0px;
1179 + box-shadow: inset 1px 1px 0 rgb(255 255 255 / 75%), inset 0 0 5px rgb(255 255 255 / 76%);
1180 + background: rgb(255 255 255 / 30%);
1181 + backdrop-filter: blur(0px);
1182 + isolation: isolate;
1183 + border-radius: 10px;
1184 + padding: 8px 15px;
1185 + min-height: auto;
1186 + display: flex;
1187 + flex-direction: column;
1188 + align-content: flex-end;
1189 + flex-wrap: wrap;
1190 +}
1191 +
1192 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
1193 + box-shadow: none;
1194 + background: rgba(255, 255, 255, 0);
1195 + backdrop-filter: none;
1196 + isolation: isolate;
1197 + border-radius: 0px;
1198 + padding: 0;
1199 +}
1200 +
1201 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
1202 + width: 32px;
1203 + height: 32px;
1204 + text-align: right;
1205 + margin:0 0 6px auto !important;
1206 +}
1207 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar {
1208 + position: relative;
1209 + border-radius: 0;
1210 +}
1211 +.wp-chatbot-avatar-inside ul.wp-chatbot-messages-container > li .wp-chatbot-avatar img{
1212 + border-radius: 50%;
1213 +}
1214 +.wp-chatbot-avatar-hidden ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1215 + padding-right: 0;
1118 1216 }