PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.8.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.8.2
8.8.2 8.8.1 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 All 538 releases
← All changes | templates/template-01/style.css +1219 -1219 8.8.1 → 8.8.2 View file →
@@ -1,1220 +1,1220 @@
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;
1216 -}
1217 -.wp-chatbot-template-01 .wp-chatbot-board-container {
1218 - border-radius: 12px;
1219 - border: 1px solid #e4e4e4;
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;
1216 +}
1217 +.wp-chatbot-template-01 .wp-chatbot-board-container {
1218 + border-radius: 12px;
1219 + border: 1px solid #e4e4e4;
1220 1220 }