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 | includes/chat-sessions/css/history-style.css +2052 -1939 8.7.3 → 8.8.0 View file →
@@ -1,1940 +1,2053 @@
1 -.wp-chatbot-messages-wrapper{padding: 15px;padding-left: 43px;padding-right: 43px;}
2 -.wp-chatbot-messages-wrapper ul{overflow:inherit !Important}
3 -.sld_menu_title_align {
4 - text-align: right;
5 -}
6 -
7 -#wpbot_checked_all{opacity:1 !important}
8 -.wpbot_sessions_checkbox{opacity:1 !important}
9 -
10 -/* The Modal (background) */
11 -.wpcsmodal {
12 - display: none; /* Hidden by default */
13 - position: fixed; /* Stay in place */
14 - z-index: 1; /* Sit on top */
15 - padding-top: 100px; /* Location of the box */
16 - left: 0;
17 - top: 0;
18 - width: 100%; /* Full width */
19 - height: 100%; /* Full height */
20 - overflow: auto; /* Enable scroll if needed */
21 - background-color: rgb(0,0,0); /* Fallback color */
22 - background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
23 -}
24 -
25 -/* Modal Content */
26 -.wpcsmodal-content {
27 - background-color: #fefefe;
28 - margin: auto;
29 - padding: 20px;
30 - border: 1px solid #888;
31 - width: 80%;
32 -}
33 -
34 -/* The Close Button */
35 -.wpcsclose {
36 - color: #aaaaaa;
37 - float: right;
38 - font-size: 28px;
39 - font-weight: bold;
40 -}
41 -
42 -.wpcsclose:hover,
43 -.wpcsclose:focus {
44 - color: #000;
45 - text-decoration: none;
46 - cursor: pointer;
47 -}
48 -
49 -
50 -.wpcs_text_field {
51 - width: 100%;
52 - padding: 12px 20px;
53 - margin: 8px 0;
54 - display: inline-block;
55 - border: 1px solid #ccc;
56 - border-radius: 4px;
57 - box-sizing: border-box;
58 -}
59 -
60 -.wpcs_submit_field {
61 - background-color: #4CAF50;
62 - color: white;
63 - padding: 10px 20px;
64 - margin: 8px 0;
65 - border: none;
66 - border-radius: 4px;
67 - cursor: pointer;
68 -}
69 -
70 -.wpcs_submit_field:hover {
71 - background-color: #45a049;
72 -}
73 -
74 -.wpcs_form_container {
75 - border-radius: 5px;
76 - background-color: #f2f2f2;
77 - padding: 20px;
78 -}
79 -.wpcs_form_container form{width:100%}
80 -.wpvo_filter_session{
81 - float: right;
82 -}
83 -.wpvo_filter_session .filter_session_start_date,.wpvo_filter_session .filter_session_end_date, .wpvo_filter_session .filter_session_button{
84 - float: left;
85 - margin-right: 5px;
86 -}
87 -.wpvo_filter_session .filter_session_button{
88 - background-color: #00cec9;
89 - border-radius: 5px;
90 - padding: 7px 15px;
91 - color: #fff;
92 -}
93 -
94 -.qcld-session-history_menu_box {
95 - background: #ffffff00;
96 - width: 100%;
97 -}
98 -.sld_menu_title.sld_menu_title_align {
99 - width: 98%;
100 -}
101 -.qcld-session-history_menu_title{
102 - display: flex;
103 - column-gap: 15px;
104 - row-gap: 10px;
105 - background: #fff;
106 - padding: 20px;
107 - margin: 20px 0 0 0;
108 - border-radius: 16px;
109 - justify-content: space-between;
110 - width: 98%;
111 - flex-direction: column;
112 -}
113 -.qcld-session-history_menu_title h2 {
114 - margin: 0 !important;
115 - padding: 0 !important;
116 - font-weight: 700;
117 - font-size: 24px;
118 - color: #5B4E96 !important;
119 - line-height: normal;
120 -}
121 -.qcld-session-history_menu_box form#wpcs_form_sessions {
122 - row-gap: 10px;
123 - background: #fff;
124 - padding: 20px;
125 - margin: 20px 0 0 0;
126 - border-radius: 16px;
127 - width: 100%;
128 -}
129 -.qcld-session-history_menu_box .btn.btn-primary {
130 - padding: 8px 24px;
131 - width: auto;
132 - font-size: 15px;
133 - font-weight: 500;
134 - border-radius: 8px;
135 - position: relative;
136 - background: #fff;
137 - color: var(--woobot-primary-color);
138 - text-decoration: none;
139 - line-height: normal;
140 - border: 2px solid var(--woobot-primary-color);
141 -}
142 -
143 -.qcld-session-history_menu_box .btn.btn-primary:hover {
144 - padding: 8px 24px;
145 - width: auto;
146 - font-size: 15px;
147 - font-weight: 500;
148 - border-radius: 8px;
149 - position: relative;
150 - background: var(--woobot-primary-color);
151 - color: #34079b;
152 - text-decoration: none;
153 - line-height: normal;
154 - border: 2px solid var(--woobot-primary-color);
155 -}
156 -
157 -.qcld-session-history_menu_box a.btn.btn-success {
158 - padding: 8px 24px;
159 - width: auto;
160 - font-size: 15px;
161 - font-weight: 500;
162 - border-radius: 8px;
163 - position: relative;
164 - background: #fff;
165 - color: var(--woobot-primary-color);
166 - text-decoration: none;
167 - line-height: normal;
168 - border: 2px solid var(--woobot-primary-color);
169 -}
170 -
171 -.qcld-session-history_menu_box a.btn.btn-success:hover {
172 - padding: 8px 24px;
173 - width: auto;
174 - font-size: 15px;
175 - font-weight: 500;
176 - border-radius: 8px;
177 - position: relative;
178 - background: var(--woobot-primary-color);
179 - color: #fff;
180 - text-decoration: none;
181 - line-height: normal;
182 - border: 2px solid var(--woobot-primary-color);
183 -}
184 -
185 -.qcld-session-history_menu_box table#chatsession-table a:not(.btn) {
186 - color: #5B4E96;
187 - font-weight: 500;
188 - text-decoration: none;
189 -}
190 -
191 -.qcld-session-history_menu_box table#chatsession-table a:not(.btn):hover {
192 - color: #463a7a;
193 - text-decoration: underline;
194 -}
195 -
196 -table#chatsession-table {
197 - margin: 0;
198 - padding: 0;
199 -}
200 -
201 -.qcld_session_history_result {
202 -
203 - background: #fff;
204 - padding: 20px;
205 - margin: 20px 0 20px 0;
206 - border-radius: 16px;
207 - width: 100%;
208 -}
209 -.single-chat-container-wrapper {
210 - background-color: #fff;
211 - border-left: none;
212 - margin-top: 20px;
213 - padding: 25px;
214 - background: #fff;
215 - padding: 20px;
216 - margin: 20px 0 20px 0;
217 - border-radius: 16px;
218 - width: 100%;
219 -}
220 -
221 -.qcld_session_history_result .btn.btn-primary {
222 - padding: 10px 24px;
223 - width: auto;
224 - font-size: 15px;
225 - font-weight: 500;
226 - border-radius: 8px;
227 - position: relative;
228 - background: #fff;
229 - color: var(--woobot-primary-color);
230 - text-decoration: none;
231 - line-height: normal;
232 - border: 2px solid var(--woobot-primary-color);
233 -}
234 -
235 -.qcld_session_history_result a.btn.btn-secondary {
236 - padding: 10px 24px;
237 - width: auto;
238 - font-size: 15px;
239 - font-weight: 500;
240 - border-radius: 8px;
241 - position: relative;
242 - background: var(--woobot-primary-color);
243 - color: #fff;
244 - text-decoration: none;
245 - line-height: normal;
246 - border: 2px solid var(--woobot-primary-color);
247 -}
248 -
249 -.sld_menu_title.qcld_session_chat_menu_title {
250 - display: flex
251 -;
252 - column-gap: 15px;
253 - row-gap: 10px;
254 - background: #fff;
255 - padding: 20px;
256 - margin: 20px 0 20px 0;
257 - border-radius: 16px;
258 - justify-content: space-between;
259 - width: 99%;
260 -}
261 -
262 -.qcld-session-yes-record-found{
263 - display: flex
264 -;
265 - column-gap: 15px;
266 - row-gap: 10px;
267 - background: #fff;
268 - padding: 20px;
269 - margin: 20px 0 20px 0;
270 - border-radius: 16px;
271 - justify-content: space-between;
272 - width: 99%;
273 -}
274 -.qcld-session-no-record-found{
275 - display: flex
276 -;
277 - column-gap: 15px;
278 - row-gap: 10px;
279 - background: #fff;
280 - padding: 20px;
281 - margin: 20px 0 20px 0;
282 - border-radius: 16px;
283 - justify-content: space-between;
284 - width: 99%;
285 -}
286 -.sld_menu_title.qcld_session_chat_menu_title h2 {
287 - margin: 0 !important;
288 - padding: 0 0 0 0 !important;
289 - font-weight: bold;
290 - font-size: 24px;
291 - color: var(--woobot-primary-color) !important;
292 - line-height: normal;
293 -}
294 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-agent {
295 - display: none;
296 -}
297 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
298 - display: flex;
299 - align-items: center;
300 - gap: 6px;
301 - width: 90%;
302 -}
303 -.toplevel_page_wbcs-botsessions-page li.wp-chat-user-msg {
304 - flex-direction: row-reverse;
305 - justify-content: flex-start;
306 - display: flex;
307 - text-align: right;
308 - align-items: center;
309 - gap: 20px;
310 - width: 90%;
311 - float: right;
312 - margin-right: 40px;
313 -}
314 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
315 - display: flex;
316 - align-items: center;
317 - gap: 6px;
318 - width: 90%;
319 -}
320 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph p {
321 - margin: 0;
322 - padding: 0;
323 -}
324 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph {
325 - background: #eee;
326 - padding: 6px 12px;
327 - border-radius: 8px;
328 -}
329 -
330 -.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
331 - text-align: right;
332 - float: right;
333 -}
334 -.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
335 - right: 12px;
336 - position: relative;
337 -}
338 -.toplevel_page_wbcs-botsessions-page #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
339 - width: 40px !important;
340 - height: 40px !important;
341 - border-radius:50%;
342 -}
343 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
344 - display: flex;
345 - align-items: center;
346 - gap: 6px;
347 -}
348 -div#session_details_modal {
349 - display: none;
350 - position: fixed;
351 - inset: 0;
352 - width: 100%;
353 - height: 100%;
354 - top: 0;
355 - left: 0 !important;
356 - right: 0;
357 - background: rgba(45, 42, 58, 0.45) !important;
358 - border-radius: 0;
359 - box-shadow: none;
360 - overflow: auto;
361 - z-index: 100000;
362 -}
363 -
364 -div#session_details_modal .modal-content {
365 - position: absolute;
366 - top: 50%;
367 - left: 50%;
368 - transform: translate(-50%, -50%);
369 - margin: 0;
370 - padding: 0;
371 - border: 1px solid #e4e0f2;
372 - width: calc(100% - 40px);
373 - max-width: 720px;
374 - height: auto;
375 - max-height: min(860px, calc(100vh - 48px));
376 - background: #fff;
377 - border-radius: 16px;
378 - box-shadow: 0 16px 48px rgba(91, 78, 150, 0.22);
379 - overflow: hidden;
380 - display: flex;
381 - flex-direction: column;
382 -}
383 -
384 -div#session_details_modal .details_session_close {
385 - position: absolute;
386 - top: 12px;
387 - right: 12px;
388 - z-index: 10001;
389 - color: #fff;
390 - background: #5B4E96;
391 - font-size: 20px;
392 - font-weight: 600;
393 - cursor: pointer;
394 - height: 32px;
395 - width: 32px;
396 - border-radius: 50%;
397 - text-align: center;
398 - line-height: 30px;
399 - box-shadow: 0 2px 8px rgba(91, 78, 150, 0.25);
400 - transition: background 0.15s ease;
401 -}
402 -
403 -div#session_details_modal .details_session_close:hover {
404 - background: #463a7a;
405 -}
406 -
407 -div#session_details_modal .details_modal_body {
408 - display: flex;
409 - flex-direction: column;
410 - height: 100%;
411 - max-height: min(860px, calc(100vh - 48px));
412 - overflow: hidden;
413 - background: #fff;
414 -}
415 -
416 -div#session_details_modal .session-details-sction-modal {
417 - flex: 1 1 auto;
418 - max-height: none;
419 - overflow-x: hidden;
420 - overflow-y: auto;
421 - padding: 16px 20px 12px;
422 - background: #faf9fd;
423 -}
424 -
425 -div#session_details_modal .session-details-sction-modal::-webkit-scrollbar {
426 - width: 8px;
427 -}
428 -
429 -div#session_details_modal .session-details-sction-modal::-webkit-scrollbar-thumb {
430 - background: #c9c4db;
431 - border-radius: 8px;
432 -}
433 -
434 -/* Source URL bar inside modal */
435 -div#session_details_modal li.session_start_url {
436 - background: #5B4E96 !important;
437 - padding: 12px 16px;
438 - margin: 0 0 16px;
439 - color: #fff;
440 - border-radius: 10px;
441 - list-style: none;
442 - font-size: 13px;
443 -}
444 -
445 -div#session_details_modal li.session_start_url span {
446 - font-weight: 600;
447 -}
448 -
449 -div#session_details_modal li.session_start_url a {
450 - color: #fff;
451 - text-decoration: underline;
452 - word-break: break-all;
453 -}
454 -
455 -/* Chat bubbles in modal */
456 -div#session_details_modal .wp-chatbot-paragraph {
457 - background: #fff !important;
458 - border: 1px solid #e4e0f2;
459 - padding: 10px 14px !important;
460 - border-radius: 12px !important;
461 - box-shadow: 0 1px 3px rgba(91, 78, 150, 0.06);
462 -}
463 -
464 -div#session_details_modal li.wp-chat-user-msg .wp-chatbot-paragraph {
465 - background: #f3f1fa !important;
466 - border-color: #ddd6f3;
467 -}
468 -
469 -div#session_details_modal .wp-chatbot-avatar img {
470 - width: 36px !important;
471 - height: 36px !important;
472 - border-radius: 50%;
473 - border: 2px solid #e4e0f2;
474 -}
475 -
476 -/* Email reply panel */
477 -div#session_details_modal .email-reply-container {
478 - flex: 0 0 auto;
479 - margin: 0 !important;
480 - padding: 18px 20px 20px !important;
481 - border-top: 1px solid #e4e0f2 !important;
482 - background: #fff !important;
483 - border-radius: 0 !important;
484 -}
485 -
486 -div#session_details_modal .email-reply-container .email-reply-meta {
487 - display: flex;
488 - flex-wrap: wrap;
489 - align-items: center;
490 - gap: 8px 14px;
491 - margin: 0 0 12px;
492 - font-size: 13px;
493 - color: #2d2a3a;
494 -}
495 -
496 -div#session_details_modal .email-reply-container .email-reply-meta strong {
497 - color: #5B4E96;
498 - font-weight: 600;
499 -}
500 -
501 -div#session_details_modal .email-reply-container .email-reply-meta a {
502 - color: #5B4E96;
503 - font-weight: 500;
504 -}
505 -
506 -div#session_details_modal .email-reply-container #reply_from_email,
507 -div#session_details_modal .email-reply-container #reply_subject,
508 -div#session_details_modal .email-reply-container #reply_message {
509 - width: 100%;
510 - box-sizing: border-box;
511 - border: 1px solid #e4e0f2;
512 - border-radius: 8px;
513 - padding: 10px 12px;
514 - font-size: 13px;
515 - color: #2d2a3a;
516 - background: #fff;
517 - box-shadow: none;
518 - outline: none;
519 - transition: border-color 0.15s ease, box-shadow 0.15s ease;
520 -}
521 -
522 -div#session_details_modal .email-reply-container #reply_from_email {
523 - width: auto;
524 - min-width: 200px;
525 - max-width: 100%;
526 - padding: 8px 12px;
527 -}
528 -
529 -div#session_details_modal .email-reply-container #reply_from_email:focus,
530 -div#session_details_modal .email-reply-container #reply_subject:focus,
531 -div#session_details_modal .email-reply-container #reply_message:focus {
532 - border-color: #5B4E96;
533 - box-shadow: 0 0 0 3px rgba(91, 78, 150, 0.15);
534 -}
535 -
536 -div#session_details_modal .email-reply-container .form-group {
537 - margin-bottom: 10px !important;
538 -}
539 -
540 -div#session_details_modal .email-reply-container #btn_send_reply_email {
541 - background: #5B4E96 !important;
542 - color: #fff !important;
543 - border: none !important;
544 - padding: 10px 20px !important;
545 - border-radius: 8px !important;
546 - font-size: 14px;
547 - font-weight: 600;
548 - cursor: pointer;
549 - transition: background 0.15s ease;
550 -}
551 -
552 -div#session_details_modal .email-reply-container #btn_send_reply_email:hover:not(:disabled) {
553 - background: #463a7a !important;
554 -}
555 -
556 -div#session_details_modal .email-reply-container #btn_send_reply_email:disabled {
557 - opacity: 0.55;
558 - cursor: not-allowed;
559 -}
560 -
561 -div#session_details_modal .email-reply-warning {
562 - margin: 0 0 12px;
563 - color: #c93f4d;
564 - font-weight: 600;
565 - font-size: 13px;
566 -}
567 -
568 -.loader-mask {
569 - height: 200px;
570 -}
571 -.loader {
572 - position: absolute;
573 - left: 50%;
574 - top: 50%;
575 - width: 50px;
576 - height: 50px;
577 - font-size: 0;
578 - color: #5B4E96;
579 - display: inline-block !important;
580 - margin: -25px 0 0 -25px;
581 - text-indent: -9999em;
582 - -webkit-transform: translateZ(0);
583 - -ms-transform: translateZ(0);
584 - transform: translateZ(0);
585 -}
586 -.lead{
587 - font-size:13px;
588 -}
589 -.loader div {
590 - background-color: #5B4E96;
591 - display: inline-block;
592 - float: none;
593 - position: absolute;
594 - top: 0;
595 - left: 0;
596 - width: 50px;
597 - height: 50px;
598 - opacity: .5;
599 - border-radius: 50%;
600 - -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
601 - animation: ballPulseDouble 2s ease-in-out infinite;
602 -}
603 -.loader div:last-child {
604 - -webkit-animation-delay: -1s;
605 - animation-delay: -1s;
606 -}
607 -@-webkit-keyframes ballPulseDouble {
608 - 0%,
609 - 100% {
610 - -webkit-transform: scale(0);
611 - transform: scale(0);
612 - }
613 - 50% {
614 - -webkit-transform: scale(1);
615 - transform: scale(1);
616 - }
617 -}
618 -@keyframes ballPulseDouble {
619 - 0%,
620 - 100% {
621 - -webkit-transform: scale(0);
622 - transform: scale(0);
623 - }
624 - 50% {
625 - -webkit-transform: scale(1);
626 - transform: scale(1);
627 - }
628 -}
629 -
630 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-agent {
631 - display: none;
632 -}
633 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
634 - display: flex;
635 - align-items: center;
636 - gap: 6px;
637 - width: 90%;
638 -}
639 -.qcld-like-dislike-icon {
640 - display: flex;
641 - gap: 6px;
642 - padding-top: 5px;
643 -}
644 -.toplevel_page_wbcs-botsessions-page li.wp-chat-user-msg {
645 - display: flex;
646 - justify-content: flex-start;
647 - text-align: right;
648 - align-items: center;
649 - gap: 20px;
650 - width: 90%;
651 - float: right;
652 - margin-right: 0px;
653 -}
654 -
655 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
656 - display: flex;
657 - align-items: center;
658 - gap: 6px;
659 - width: 90%;
660 -}
661 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph p {
662 - margin: 0;
663 - padding: 0;
664 -}
665 -.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph {
666 - background: #eee;
667 - padding: 6px 12px;
668 - border-radius: 8px;
669 -}
670 -
671 -.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
672 - text-align: right;
673 - float: right;
674 -}
675 -.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
676 - right: 12px;
677 - position: relative;
678 -}
679 -.toplevel_page_wbcs-botsessions-page #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
680 - width: 40px !important;
681 - height: 40px !important;
682 -border-radius:50%;
683 -}
684 -.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
685 - display: flex;
686 - align-items: center;
687 - gap: 6px;
688 -}
689 -
690 -#session_details_modal ul{
691 - margin: 0;
692 - padding: 0;
693 -}
694 -table#chatsession-table td.text-left:nth-child(2) {
695 - max-width: 220px;
696 -}
697 -
698 -
699 -div#wpchatbot-sessioncorn-settings {
700 - display: flex;
701 - column-gap: 15px;
702 - row-gap: 10px;
703 - background: #fff;
704 - padding: 20px;
705 - margin: 0 0 0 0;
706 - border-radius: 16px;
707 - justify-content: space-between;
708 - width: 96%;
709 - flex-direction: column;
710 -}
711 -div#wpchatbot-sessioncorn-settings button#save_wpsseion_corn_setting {
712 - display: block;
713 - max-width: 220px;
714 - border: none;
715 -}
716 -div#wpchatbot-sessioncorn-mannual {
717 - width: 100%;
718 -}
719 -div#wpchatbot-sessioncorn-mannual {
720 - width: 98%;
721 - margin: 20px 0 0 0;
722 -}
723 -div#wpchatbot-sessioncorn-mannual #swpsseion_mannual_scraper_corn {
724 - width: 98%;
725 - border: none;
726 -}
727 -div#wpchatbot-sessioncorn-settings textarea {
728 - width: 100%;
729 - height: 120px !important;
730 -}
731 -div#wpchatbot-sessioncorn-mannual {
732 - width: 98%;
733 - margin: 20px 0 0 0;
734 - border-radius: 16px;
735 -}
736 -
737 -div#wpchatbot-sessioncorn-mannual #swpsseion_mannual_scraper_corn {
738 - width: auto;
739 - border: none;
740 - margin: 0 !important;
741 -}
742 -div#wpchatbot-sessioncorn-mannual input#wpchatbot-sessioncorn-mannual-number {
743 - padding: 0 10px;
744 - margin: 0 12px;
745 -}
746 -
747 -div#wpchatbot-sessioncorn-mannual {
748 - width: 96%;
749 - padding: 20px;
750 -}
751 -.qcld-bit-session-form-group-outer {
752 - display: flex;
753 - justify-content: space-between;
754 - width: 100%;
755 - gap: 20px;
756 -}
757 -.qcld-bit-session-form-group-outer .form-group {
758 - width: 100%;
759 -}
760 -
761 -.qcld-bit-session-form-group-outer .form-group input{
762 - width: 100%;
763 -}
764 -
765 -
766 -.qcld-bit-session-form-group-outer .form-group select{
767 - width: 100% !important;
768 - max-width: inherit !important;
769 -}
770 -
771 -/**Admin notice style**/
772 -.qcld-wpbot-updated {
773 - display: flex;
774 - column-gap: 15px;
775 - row-gap: 10px;
776 - background: #fff;
777 - padding: 22px 20px;
778 - margin: 20px 0 20px 0;
779 - border-radius: 16px;
780 - flex-direction: column;
781 - width: 96%;
782 -}
783 -.qcld-wpbot-updated p {
784 - margin: 0;
785 - padding: 0;
786 - font-size: 16px;
787 - font-family: "DM Sans", sans-serif !important;
788 -}
789 -
790 -.qcld-wpbot-updated a.button-primary.button-large {
791 - background: var(--woobot-primary-color);
792 - color: #ffffff;
793 - border: none;
794 - padding: 5px 25px;
795 - line-height: 28px;
796 - font-weight: bold;
797 - border: 2px solid var(--woobot-primary-color);
798 - border-radius: 8px;
799 -}
800 -.qcld-wpbot-updated a.button-primary.button-large:hover {
801 - background: #fff;
802 - color: var(--woobot-primary-color);;
803 - border: none;
804 - padding: 5px 25px;
805 - line-height: 28px;
806 - font-weight: bold;
807 - border: 2px solid var(--woobot-primary-color);
808 - border-radius: 8px;
809 -}
810 -#swpsseion_mannual_scraper_corn, #save_wpsseion_corn_setting {
811 - padding: 14px 30px;
812 - width: auto;
813 - font-size: 16px;
814 - font-weight: 500;
815 - color: #988FBD;
816 - border-radius: 8px;
817 - position: relative;
818 - display: inline-block;
819 - align-items: center;
820 - gap: 15px;
821 - background: var(--woobot-primary-color);
822 - color: #ffffff;
823 - text-decoration: none;
824 - border-color: var(--woobot-primary-color) !important;
825 - line-height: normal;
826 - margin: 20px 0 20px 0 !important;
827 - cursor: pointer;
828 -}
829 -.qcld-wpbot-updated a.button-secondary.button-large {
830 - border: 2px solid var(--woobot-primary-color);
831 - background: #fff;
832 - color: var(--woobot-primary-color);
833 - padding: 8px 20px;
834 - border-radius: 8px;
835 - display: inline-block;
836 - margin: 0;
837 - line-height: 28px;
838 - padding: 5px 25px;
839 - line-height: 28px;
840 - font-weight: bold;
841 -}
842 -.qcld-wpbot-updated a.button-secondary.button-large:hover {
843 - border: 2px solid var(--woobot-primary-color);
844 - background: var(--woobot-primary-color);
845 - color: #fff;
846 - padding: 8px 20px;
847 - border-radius: 8px;
848 - display: inline-block;
849 - margin: 0;
850 - line-height: 28px;
851 - padding: 5px 25px;
852 - line-height: 28px;
853 - font-weight: bold;
854 -}
855 -div#wpchatbot-sessioncorn-mannual input#wpchatbot-sessioncorn-mannual-number {
856 - padding: 2px 5px;
857 - margin: 0 12px;
858 - max-width: 60px;
859 - background: transparent;
860 - /* color: #ffff;
861 - border-color: #fff; */
862 -}
863 -
864 -
865 -.qcld-session-history_menu_box .btn.btn-primary {
866 - background: #564a8e !important;
867 - color: #fff !important;
868 - margin: 0 0 3px 0;
869 -}
870 -.qcld-session-history_menu_box a.btn.btn-success {
871 - padding: 8px 24px;
872 - width: auto;
873 - font-size: 15px;
874 - font-weight: 500;
875 - border-radius: 8px;
876 - position: relative;
877 - background: #ffffff;
878 - color: #564a8e;
879 - text-decoration: none;
880 - line-height: normal;
881 - border: 2px solid #564a8e;
882 -}
883 -.qcld-session-history_menu_box a.btn.btn-success:hover {
884 - padding: 8px 24px;
885 - width: auto;
886 - font-size: 15px;
887 - font-weight: 500;
888 - border-radius: 8px;
889 - position: relative;
890 - background: #564a8e;
891 - color: #fff;
892 - text-decoration: none;
893 - line-height: normal;
894 - border: 2px solid #564a8e;
895 -}
896 -
897 -li.session_start_url span {
898 - font-weight: bold;
899 -}
900 -li.session_start_url {
901 - background: #5B4E96 !important;
902 - padding: 8px 8px;
903 - color: #fff;
904 - border-radius: 6px;
905 -}
906 -li.session_start_url a {
907 - color: #fff;
908 -}
909 -.qcld-like-dislike-icon a i {
910 - font-size: 16px;
911 -}
912 -
913 -.forward-session-wrapper-detailspage {
914 - position: fixed;
915 - bottom: 0;
916 - left: 160px;
917 - right: 0;
918 - width: auto;
919 - max-width: none;
920 - margin: 0;
921 - background: #fff;
922 - padding: 18px 24px;
923 - z-index: 10050;
924 - opacity: 0;
925 - visibility: hidden;
926 - pointer-events: none;
927 - transform: translateY(100%);
928 - transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
929 - box-shadow: 0 -8px 28px rgba(91, 78, 150, 0.12);
930 - border-top: 1px solid #e4e0f2;
931 - max-height: 55vh;
932 - overflow-y: auto;
933 - box-sizing: border-box;
934 -}
935 -
936 -.forward-session-wrapper-detailspage.is-visible {
937 - opacity: 1;
938 - visibility: visible;
939 - pointer-events: auto;
940 - transform: translateY(0);
941 -}
942 -
943 -body.folded .forward-session-wrapper-detailspage {
944 - left: 36px;
945 -}
946 -
947 -@media screen and (max-width: 960px) {
948 - .forward-session-wrapper-detailspage,
949 - body.folded .forward-session-wrapper-detailspage {
950 - left: 0;
951 - }
952 -}
953 -
954 -@media screen and (max-width: 782px) {
955 - div#session_details_modal .modal-content {
956 - width: calc(100% - 24px);
957 - max-height: calc(100vh - 24px);
958 - border-radius: 12px;
959 - }
960 -
961 - div#session_details_modal .email-reply-container #reply_from_email {
962 - min-width: 100%;
963 - }
964 -}
965 -
966 -/* ─── Modern Sessions UI (plugin palette) ─────────────────────────────────── */
967 -.qcld-session-history_menu_box {
968 - --woobot-primary-color: #5B4E96;
969 - --woobot-primary-dark: #463a7a;
970 - --woobot-primary-soft: #f3f1fa;
971 - --woobot-primary-border: #e4e0f2;
972 - --woobot-surface: #ffffff;
973 - --woobot-page-bg: #F5F7FD;
974 - --woobot-text: #2d2a3a;
975 - --woobot-muted: #6b6680;
976 - font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
977 -}
978 -
979 -/* Email notification toggle */
980 -.qcld-session-email-notice {
981 - display: flex;
982 - align-items: center;
983 - background: var(--woobot-primary-soft);
984 - border: 1px solid var(--woobot-primary-border);
985 - border-radius: 12px;
986 - padding: 14px 18px;
987 - margin: 8px 0 20px;
988 - max-width: 100%;
989 -}
990 -
991 -.qcld-session-email-notice__label {
992 - display: flex;
993 - align-items: center;
994 - gap: 12px;
995 - margin: 0;
996 - cursor: pointer;
997 - font-size: 14px;
998 - font-weight: 500;
999 - color: var(--woobot-primary-color);
1000 - line-height: 1.4;
1001 -}
1002 -
1003 -.qcld-session-email-notice__input {
1004 - position: absolute !important;
1005 - opacity: 0 !important;
1006 - width: 0 !important;
1007 - height: 0 !important;
1008 - margin: 0 !important;
1009 - padding: 0 !important;
1010 -}
1011 -
1012 -.qcld-session-email-notice__switch {
1013 - position: relative;
1014 - flex-shrink: 0;
1015 - width: 44px;
1016 - height: 24px;
1017 - background: #c9c4db;
1018 - border-radius: 999px;
1019 - transition: background 0.2s ease;
1020 -}
1021 -
1022 -.qcld-session-email-notice__switch::after {
1023 - content: "";
1024 - position: absolute;
1025 - top: 3px;
1026 - left: 3px;
1027 - width: 18px;
1028 - height: 18px;
1029 - background: #fff;
1030 - border-radius: 50%;
1031 - box-shadow: 0 1px 3px rgba(91, 78, 150, 0.25);
1032 - transition: transform 0.2s ease;
1033 -}
1034 -
1035 -.qcld-session-email-notice__input:checked + .qcld-session-email-notice__switch {
1036 - background: var(--woobot-primary-color);
1037 -}
1038 -
1039 -.qcld-session-email-notice__input:checked + .qcld-session-email-notice__switch::after {
1040 - transform: translateX(20px);
1041 -}
1042 -
1043 -.qcld-session-email-notice__input:focus-visible + .qcld-session-email-notice__switch {
1044 - outline: 2px solid var(--woobot-primary-color);
1045 - outline-offset: 2px;
1046 -}
1047 -
1048 -.qcld-session-email-notice__text {
1049 - color: var(--woobot-text);
1050 -}
1051 -
1052 -/* Top page pagination bar */
1053 -.qcld-session-history_menu_box .sld_menu_title.sld_menu_title_align,
1054 -.qcld-session-history_menu_box .qcld-session-pagination-bar {
1055 - display: flex;
1056 - justify-content: flex-end;
1057 - align-items: center;
1058 - background: var(--woobot-surface);
1059 - padding: 14px 20px;
1060 - margin: 16px 0 0;
1061 - border-radius: 16px;
1062 - width: 98%;
1063 - box-sizing: border-box;
1064 -}
1065 -
1066 -.qcld-session-pagination {
1067 - display: flex;
1068 - align-items: center;
1069 - flex-wrap: wrap;
1070 - gap: 8px;
1071 -}
1072 -
1073 -.qcld-session-history_menu_box .wpbot_pagination {
1074 - margin-right: 8px;
1075 - font-size: 13px;
1076 - font-weight: 600;
1077 - color: var(--woobot-muted);
1078 -}
1079 -
1080 -.qcld-session-history_menu_box a.page-numbers,
1081 -.qcld-session-history_menu_box span.page-numbers {
1082 - display: inline-flex;
1083 - align-items: center;
1084 - justify-content: center;
1085 - min-width: 34px;
1086 - height: 34px;
1087 - padding: 0 10px;
1088 - margin: 0 2px;
1089 - border-radius: 8px;
1090 - border: 1px solid var(--woobot-primary-border);
1091 - background: #fff;
1092 - color: var(--woobot-primary-color);
1093 - font-size: 13px;
1094 - font-weight: 600;
1095 - line-height: 1;
1096 - text-decoration: none;
1097 - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1098 -}
1099 -
1100 -.qcld-session-history_menu_box a.page-numbers:hover {
1101 - background: var(--woobot-primary-soft);
1102 - border-color: var(--woobot-primary-color);
1103 - color: var(--woobot-primary-dark);
1104 -}
1105 -
1106 -.qcld-session-history_menu_box span.page-numbers.current {
1107 - background: var(--woobot-primary-color);
1108 - border-color: var(--woobot-primary-color);
1109 - color: #fff;
1110 -}
1111 -
1112 -.qcld-session-history_menu_box span.page-numbers.dots {
1113 - border: none;
1114 - background: transparent;
1115 - color: var(--woobot-muted);
1116 - min-width: auto;
1117 - padding: 0 4px;
1118 -}
1119 -
1120 -/* DataTables toolbar: entries + search */
1121 -.qcld-session-history_menu_box div.dt-container {
1122 - margin-top: 8px;
1123 -}
1124 -
1125 -.qcld-session-history_menu_box div.dt-container .dt-layout-row {
1126 - display: flex;
1127 - flex-wrap: wrap;
1128 - align-items: center;
1129 - justify-content: space-between;
1130 - gap: 12px;
1131 - margin-bottom: 14px;
1132 -}
1133 -
1134 -.qcld-session-history_menu_box div.dt-container .dt-length,
1135 -.qcld-session-history_menu_box div.dt-container .dt-search {
1136 - display: flex;
1137 - align-items: center;
1138 - gap: 8px;
1139 - font-size: 13px;
1140 - font-weight: 500;
1141 - color: var(--woobot-muted);
1142 -}
1143 -
1144 -.qcld-session-history_menu_box div.dt-container select.dt-input,
1145 -.qcld-session-history_menu_box div.dt-container input.dt-input {
1146 - min-width: 72px;
1147 - height: 38px;
1148 - padding: 6px 12px;
1149 - border: 1px solid var(--woobot-primary-border);
1150 - border-radius: 8px;
1151 - background: #fff;
1152 - color: var(--woobot-text);
1153 - font-size: 13px;
1154 - font-weight: 500;
1155 - box-shadow: none;
1156 - outline: none;
1157 - transition: border-color 0.15s ease, box-shadow 0.15s ease;
1158 - line-height: 28px;
1159 -}
1160 -
1161 -.qcld-like-dislike-icon a:focus {
1162 - outline: 0;
1163 - outline-offset: 0;
1164 - box-shadow: none;
1165 - text-decoration: none;
1166 -}
1167 -
1168 -.qcld-session-history_menu_box div.dt-container input.dt-input {
1169 - min-width: 200px;
1170 -}
1171 -
1172 -.qcld-session-history_menu_box div.dt-container select.dt-input:focus,
1173 -.qcld-session-history_menu_box div.dt-container input.dt-input:focus {
1174 - border-color: var(--woobot-primary-color);
1175 - box-shadow: 0 0 0 3px rgba(91, 78, 150, 0.15);
1176 -}
1177 -
1178 -/* Sessions table */
1179 -.qcld-session-history_menu_box .chatsession_table_area {
1180 - overflow-x: auto;
1181 -}
1182 -
1183 -.qcld-session-history_menu_box table#chatsession-table {
1184 - width: 100% !important;
1185 - border-collapse: separate;
1186 - border-spacing: 0;
1187 - border: 1px solid var(--woobot-primary-border);
1188 - border-radius: 12px;
1189 - overflow: hidden;
1190 - background: #fff;
1191 -}
1192 -
1193 -.qcld-session-history_menu_box table#chatsession-table thead tr.table-primary,
1194 -.qcld-session-history_menu_box table#chatsession-table thead tr {
1195 - background: var(--woobot-primary-color) !important;
1196 -}
1197 -
1198 -.qcld-session-history_menu_box table#chatsession-table thead th {
1199 - background: var(--woobot-primary-color) !important;
1200 - color: #fff !important;
1201 - font-size: 13px;
1202 - font-weight: 600;
1203 - letter-spacing: 0.02em;
1204 - padding: 14px 12px !important;
1205 - border: none !important;
1206 - vertical-align: middle;
1207 - white-space: nowrap;
1208 -}
1209 -
1210 -.qcld-session-history_menu_box table#chatsession-table tbody td {
1211 - background: #fff !important;
1212 - color: var(--woobot-text) !important;
1213 - font-size: 13px;
1214 - padding: 14px 12px !important;
1215 - border-top: 1px solid #eef0f6 !important;
1216 - border-bottom: none !important;
1217 - border-left: none !important;
1218 - border-right: none !important;
1219 - border-radius: 0 !important;
1220 - vertical-align: middle;
1221 -}
1222 -
1223 -.qcld-session-history_menu_box table#chatsession-table.table-striped > tbody > tr:nth-of-type(odd) > * {
1224 - background: #faf9fd !important;
1225 - box-shadow: none !important;
1226 -}
1227 -
1228 -.qcld-session-history_menu_box table#chatsession-table tbody tr:hover > * {
1229 - background: var(--woobot-primary-soft) !important;
1230 -}
1231 -
1232 -.qcld-session-history_menu_box table#chatsession-table .wpbot_sessions_checkbox,
1233 -.qcld-session-history_menu_box table#chatsession-table #wpbot_checked_all {
1234 - width: 16px;
1235 - height: 16px;
1236 - accent-color: var(--woobot-primary-color);
1237 - cursor: pointer;
1238 -}
1239 -
1240 -/* Row action buttons */
1241 -.qcld-session-history_menu_box table#chatsession-table .btn {
1242 - display: inline-flex;
1243 - align-items: center;
1244 - justify-content: center;
1245 - gap: 4px;
1246 - margin: 2px 4px 2px 0;
1247 - padding: 7px 12px;
1248 - border-radius: 8px;
1249 - font-size: 12px;
1250 - font-weight: 600;
1251 - line-height: 1.2;
1252 - border: none;
1253 - cursor: pointer;
1254 - text-decoration: none;
1255 - transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
1256 -}
1257 -
1258 -.qcld-session-history_menu_box table#chatsession-table a.btn.btn-danger,
1259 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-danger {
1260 - background: #e25563;
1261 - color: #fff;
1262 -}
1263 -
1264 -.qcld-session-history_menu_box table#chatsession-table a.btn.btn-danger:hover,
1265 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-danger:hover {
1266 - background: #c93f4d;
1267 - color: #fff;
1268 -}
1269 -
1270 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-secondary {
1271 - background: #fff;
1272 - color: var(--woobot-primary-color);
1273 - border: 1px solid var(--woobot-primary-border);
1274 -}
1275 -
1276 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-secondary:hover {
1277 - background: var(--woobot-primary-soft);
1278 - border-color: var(--woobot-primary-color);
1279 - color: var(--woobot-primary-dark);
1280 -}
1281 -
1282 -.qcld-session-history_menu_box table#chatsession-table a.btn.btn-info,
1283 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-info,
1284 -.qcld-session-history_menu_box table#chatsession-table span.btn.btn-info {
1285 - background: var(--woobot-primary-color);
1286 - color: #fff;
1287 -}
1288 -
1289 -.qcld-session-history_menu_box table#chatsession-table a.btn.btn-info:hover,
1290 -.qcld-session-history_menu_box table#chatsession-table .btn.btn-info:hover,
1291 -.qcld-session-history_menu_box table#chatsession-table span.btn.btn-info:hover {
1292 - background: var(--woobot-primary-dark);
1293 - color: #fff;
1294 -}
1295 -
1296 -/* DataTables bottom pagination */
1297 -.qcld-session-history_menu_box div.dt-container .dt-paging {
1298 - display: flex;
1299 - justify-content: flex-end;
1300 - margin-top: 8px;
1301 -}
1302 -
1303 -.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button {
1304 - display: inline-flex;
1305 - align-items: center;
1306 - justify-content: center;
1307 - min-width: 34px;
1308 - height: 34px;
1309 - margin: 0 2px;
1310 - padding: 0 10px;
1311 - border-radius: 8px !important;
1312 - border: 1px solid var(--woobot-primary-border) !important;
1313 - background: #fff !important;
1314 - color: var(--woobot-primary-color) !important;
1315 - font-size: 13px;
1316 - font-weight: 600;
1317 - box-shadow: none !important;
1318 - cursor: pointer;
1319 - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1320 -}
1321 -
1322 -.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
1323 - background: var(--woobot-primary-soft) !important;
1324 - border-color: var(--woobot-primary-color) !important;
1325 - color: var(--woobot-primary-dark) !important;
1326 -}
1327 -
1328 -.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button.current {
1329 - background: var(--woobot-primary-color) !important;
1330 - border-color: var(--woobot-primary-color) !important;
1331 - color: #fff !important;
1332 -}
1333 -
1334 -.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button.disabled {
1335 - opacity: 0.45;
1336 - cursor: default;
1337 -}
1338 -
1339 -@media screen and (max-width: 782px) {
1340 - .qcld-session-email-notice {
1341 - padding: 12px 14px;
1342 - }
1343 -
1344 - .qcld-session-history_menu_box div.dt-container input.dt-input {
1345 - min-width: 140px;
1346 - }
1347 -
1348 - .qcld-session-history_menu_box table#chatsession-table .btn {
1349 - width: 100%;
1350 - margin: 3px 0;
1351 - }
1352 -}
1353 -
1354 -.chatsession_table_area .col-md-6{
1355 - padding-left: 0 !important;
1356 -}
1357 -
1358 -.dt-layout-cell.dt-layout-full table#chatsession-table input[type=checkbox]:checked::before {
1359 - margin: 0;
1360 -}
1361 -
1362 -/* ─── Session details page ────────────────────────────────────────────────── */
1363 -.wpbot-session-details-page {
1364 - --woobot-primary: #5B4E96;
1365 - --woobot-primary-dark: #463a7a;
1366 - --woobot-primary-soft: #f3f1fa;
1367 - --woobot-primary-border: #e4e0f2;
1368 - --woobot-text: #2d2a3a;
1369 - --woobot-muted: #6b6680;
1370 - --woobot-danger: #e25563;
1371 - font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1372 - margin: 12px 20px 40px 0;
1373 - padding-bottom: 0px;
1374 - color: var(--woobot-text);
1375 - max-width: 1280px;
1376 - margin: 0 auto;
1377 -}
1378 -
1379 -.wpbot-session-details-page .wpbot-session-meta-card,
1380 -.wpbot-session-details-page .wpbot-session-chat-card {
1381 - background: #fff;
1382 - border: 1px solid var(--woobot-primary-border);
1383 - border-radius: 16px;
1384 - box-shadow: 0 6px 22px rgba(91, 78, 150, 0.06);
1385 - width: 100%;
1386 - box-sizing: border-box;
1387 -}
1388 -
1389 -.wpbot-session-details-page .wpbot-session-meta-card {
1390 - padding: 22px 24px;
1391 - margin: 20px 0 20px;
1392 -}
1393 -
1394 -.wpbot-session-details-page .wpbot-session-meta-card__header {
1395 - display: flex;
1396 - align-items: center;
1397 - justify-content: space-between;
1398 - flex-wrap: wrap;
1399 - gap: 14px;
1400 - margin-bottom: 18px;
1401 - padding-bottom: 16px;
1402 - border-bottom: 1px solid var(--woobot-primary-soft);
1403 -}
1404 -ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1405 - padding-right: 0 !important;
1406 -}
1407 -.wpbot-session-details-page .wpbot-session-meta-card__header h2 {
1408 - margin: 0 !important;
1409 - padding: 0 !important;
1410 - font-size: 22px;
1411 - font-weight: 700;
1412 - color: var(--woobot-primary) !important;
1413 - line-height: 1.3;
1414 -}
1415 -
1416 -.wpbot-session-details-page .wpbot-session-meta-card__actions {
1417 - display: flex;
1418 - flex-wrap: wrap;
1419 - gap: 10px;
1420 -}
1421 -
1422 -.wpbot-session-details-page .wpbot-session-meta-grid {
1423 - display: grid;
1424 - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1425 - gap: 14px;
1426 -}
1427 -
1428 -.wpbot-session-details-page .wpbot-session-meta-item {
1429 - background: var(--woobot-primary-soft);
1430 - border: 1px solid var(--woobot-primary-border);
1431 - border-radius: 12px;
1432 - padding: 14px 16px;
1433 -}
1434 -
1435 -.wpbot-session-details-page .wpbot-session-meta-item__label {
1436 - display: block;
1437 - font-size: 12px;
1438 - font-weight: 600;
1439 - letter-spacing: 0.03em;
1440 - text-transform: uppercase;
1441 - color: var(--woobot-muted);
1442 - margin-bottom: 6px;
1443 -}
1444 -
1445 -.wpbot-session-details-page .wpbot-session-meta-item__value {
1446 - display: block;
1447 - font-size: 15px;
1448 - font-weight: 600;
1449 - color: var(--woobot-text);
1450 - word-break: break-word;
1451 -}
1452 -
1453 -.wpbot-session-details-page .btn {
1454 - display: inline-flex;
1455 - align-items: center;
1456 - justify-content: center;
1457 - gap: 6px;
1458 - border-radius: 8px !important;
1459 - font-size: 13px !important;
1460 - font-weight: 600 !important;
1461 - line-height: 1.2 !important;
1462 - padding: 9px 16px !important;
1463 - text-decoration: none !important;
1464 - border-width: 2px !important;
1465 - transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1466 -}
1467 -
1468 -.wpbot-session-details-page .btn.btn-primary,
1469 -.wpbot-session-details-page .wpbot-session-back-btn.btn-primary {
1470 - background: var(--woobot-primary) !important;
1471 - border-color: var(--woobot-primary) !important;
1472 - color: #fff !important;
1473 -}
1474 -
1475 -.wpbot-session-details-page .btn.btn-primary:hover,
1476 -.wpbot-session-details-page .wpbot-session-back-btn.btn-primary:hover {
1477 - background: var(--woobot-primary-dark) !important;
1478 - border-color: var(--woobot-primary-dark) !important;
1479 - color: #fff !important;
1480 -}
1481 -
1482 -.wpbot-session-details-page .btn.btn-secondary {
1483 - background: #fff !important;
1484 - border-color: var(--woobot-primary) !important;
1485 - color: var(--woobot-primary) !important;
1486 -}
1487 -
1488 -.wpbot-session-details-page .btn.btn-secondary:hover {
1489 - background: var(--woobot-primary) !important;
1490 - color: #fff !important;
1491 -}
1492 -
1493 -.wpbot-session-details-page .btn.btn-danger {
1494 - background: #fff !important;
1495 - border: 2px solid var(--woobot-danger) !important;
1496 - color: var(--woobot-danger) !important;
1497 -}
1498 -
1499 -.wpbot-session-details-page .btn.btn-danger:hover {
1500 - background: var(--woobot-danger) !important;
1501 - color: #fff !important;
1502 -}
1503 -
1504 -.wpbot-session-details-page .wpbot-session-chat-card {
1505 - padding: 0;
1506 - margin: 0 0 20px;
1507 - overflow: hidden;
1508 -}
1509 -
1510 -.wpbot-session-details-page .wpbot-session-chat-card__header {
1511 - display: flex;
1512 - align-items: center;
1513 - justify-content: space-between;
1514 - flex-wrap: wrap;
1515 - gap: 12px;
1516 - padding: 18px 22px;
1517 - border-bottom: 1px solid var(--woobot-primary-border);
1518 - background: #fff;
1519 -}
1520 -
1521 -.wpbot-session-details-page .wpbot-session-chat-card__header h3 {
1522 - margin: 0 !important;
1523 - padding: 0 !important;
1524 - font-size: 18px;
1525 - font-weight: 700;
1526 - color: var(--woobot-primary) !important;
1527 -}
1528 -
1529 -.wpbot-session-details-page .wpbot-session-chat-card__header .wpbot-session-back-btn {
1530 - margin: 0;
1531 -}
1532 -
1533 -.wpbot-session-details-page .wp-chatbot-messages-wrapper {
1534 - padding: 18px 22px 24px;
1535 - background: #faf9fd;
1536 -}
1537 -
1538 -.wpbot-session-details-page .wp-chatbot-messages-wrapper ul {
1539 - margin: 0;
1540 - padding: 0;
1541 - list-style: none;
1542 -}
1543 -
1544 -.wpbot-session-details-page li.session_start_url {
1545 - background: var(--woobot-primary) !important;
1546 - padding: 12px 16px !important;
1547 - margin: 0 0 18px !important;
1548 - color: #fff !important;
1549 - border-radius: 10px !important;
1550 - font-size: 13px !important;
1551 - font-weight: 500;
1552 -}
1553 -
1554 -.wpbot-session-details-page li.session_start_url a {
1555 - color: #fff !important;
1556 - text-decoration: underline;
1557 - word-break: break-all;
1558 -}
1559 -
1560 -.wpbot-session-details-page .wp-chatbot-paragraph {
1561 - background: #fff !important;
1562 - border: 1px solid var(--woobot-primary-border);
1563 - padding: 10px 14px !important;
1564 - border-radius: 12px !important;
1565 - box-shadow: 0 1px 3px rgba(91, 78, 150, 0.06);
1566 - text-align: left !important;
1567 -}
1568 -
1569 -.wpbot-session-details-page li.wp-chat-user-msg .wp-chatbot-paragraph {
1570 - background: var(--woobot-primary-soft) !important;
1571 - border-color: #ddd6f3;
1572 -}
1573 -
1574 -.wpbot-session-details-page .wp-chatbot-avatar img {
1575 - width: 36px !important;
1576 - height: 36px !important;
1577 - border-radius: 50%;
1578 - border: 2px solid var(--woobot-primary-border);
1579 -}
1580 -
1581 -.wpbot-session-details-page .forward-session-wrapper-detailspage {
1582 - display: none;
1583 -}
1584 -
1585 -.wpbot-session-details-page .wpbot-reply-fab {
1586 - position: fixed;
1587 - right: 28px;
1588 - bottom: 28px;
1589 - z-index: 10060;
1590 - display: inline-flex;
1591 - align-items: center;
1592 - gap: 10px;
1593 - padding: 14px 20px;
1594 - border: none;
1595 - border-radius: 999px;
1596 - background: var(--woobot-primary);
1597 - color: #fff;
1598 - font-size: 14px;
1599 - font-weight: 600;
1600 - font-family: inherit;
1601 - box-shadow: 0 10px 28px rgba(91, 78, 150, 0.35);
1602 - cursor: pointer;
1603 - transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
1604 -}
1605 -
1606 -.wpbot-session-details-page .wpbot-reply-fab i {
1607 - font-size: 18px;
1608 - line-height: 1;
1609 -}
1610 -
1611 -.wpbot-session-details-page .wpbot-reply-fab:hover,
1612 -.wpbot-session-details-page .wpbot-reply-fab.is-active {
1613 - background: var(--woobot-primary-dark);
1614 - transform: translateY(-2px);
1615 - box-shadow: 0 12px 32px rgba(91, 78, 150, 0.4);
1616 -}
1617 -
1618 -.wpbot-session-details-page .wpbot-reply-panel {
1619 - position: fixed;
1620 - right: 28px;
1621 - bottom: 88px;
1622 - z-index: 10061;
1623 - width: min(720px, calc(100vw - 40px));
1624 - max-height: min(70vh, 720px);
1625 - overflow: hidden;
1626 - display: flex;
1627 - flex-direction: column;
1628 - background: #fff;
1629 - border: 1px solid var(--woobot-primary-border);
1630 - border-radius: 16px;
1631 - box-shadow: 0 16px 40px rgba(91, 78, 150, 0.2);
1632 - opacity: 0;
1633 - visibility: hidden;
1634 - transform: translateY(12px) scale(0.98);
1635 - transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
1636 -}
1637 -
1638 -.wpbot-session-details-page .wpbot-reply-panel.is-open {
1639 - opacity: 1;
1640 - visibility: visible;
1641 - transform: translateY(0) scale(1);
1642 -}
1643 -
1644 -.wpbot-session-details-page .wpbot-reply-panel[hidden] {
1645 - display: none !important;
1646 -}
1647 -
1648 -.wpbot-session-details-page .wpbot-reply-panel.is-open[hidden] {
1649 - display: flex !important;
1650 -}
1651 -
1652 -.wpbot-session-details-page .wpbot-reply-panel__header {
1653 - display: flex;
1654 - align-items: center;
1655 - justify-content: space-between;
1656 - gap: 12px;
1657 - padding: 14px 16px;
1658 - border-bottom: 1px solid var(--woobot-primary-border);
1659 - background: var(--woobot-primary-soft);
1660 -}
1661 -
1662 -.wpbot-session-details-page .wpbot-reply-panel__header h4 {
1663 - margin: 0 !important;
1664 - font-size: 15px;
1665 - font-weight: 700;
1666 - color: var(--woobot-primary);
1667 -}
1668 -
1669 -.wpbot-session-details-page .wpbot-reply-panel__close {
1670 - width: 30px;
1671 - height: 30px;
1672 - border: none;
1673 - border-radius: 50%;
1674 - background: var(--woobot-primary);
1675 - color: #fff;
1676 - font-size: 20px;
1677 - line-height: 28px;
1678 - cursor: pointer;
1679 - padding: 0;
1680 -}
1681 -
1682 -.wpbot-session-details-page .wpbot-reply-panel__close:hover {
1683 - background: var(--woobot-primary-dark);
1684 -}
1685 -
1686 -.wpbot-session-details-page .wpbot-reply-panel__body {
1687 - padding: 16px;
1688 - overflow-y: auto;
1689 -}
1690 -
1691 -.wpbot-session-details-page .wpbot-reply-panel__to {
1692 - margin: 0 0 12px;
1693 - font-size: 13px;
1694 - color: var(--woobot-text);
1695 -}
1696 -
1697 -.wpbot-session-details-page .wpbot-reply-panel__warning {
1698 - margin: 0 0 14px;
1699 - padding: 12px;
1700 - border-radius: 8px;
1701 - background: #fdebec;
1702 - color: var(--woobot-danger);
1703 - font-size: 13px;
1704 - font-weight: 600;
1705 -}
1706 -
1707 -.wpbot-session-details-page .email-reply-container {
1708 - background: var(--woobot-primary-soft);
1709 - border: 1px solid var(--woobot-primary-border);
1710 - border-radius: 12px;
1711 - padding: 14px;
1712 - margin-bottom: 14px;
1713 -}
1714 -
1715 -.wpbot-session-details-page .email-reply-container h4 {
1716 - margin: 0 0 14px !important;
1717 - font-size: 15px;
1718 - font-weight: 600;
1719 - color: var(--woobot-primary);
1720 -}
1721 -
1722 -.wpbot-session-details-page .email-reply-container .form-label {
1723 - font-size: 13px;
1724 - font-weight: 600;
1725 - color: var(--woobot-muted);
1726 - margin-bottom: 6px;
1727 -}
1728 -
1729 -.wpbot-session-details-page .email-reply-container .form-control,
1730 -.wpbot-session-details-page .forward-session-wrapper #details_session_email {
1731 - border: 1px solid var(--woobot-primary-border);
1732 - border-radius: 8px;
1733 - padding: 10px 12px;
1734 - font-size: 13px;
1735 - color: var(--woobot-text);
1736 - box-shadow: none;
1737 - outline: none;
1738 -}
1739 -
1740 -.wpbot-session-details-page .email-reply-container .form-control:focus,
1741 -.wpbot-session-details-page .forward-session-wrapper #details_session_email:focus {
1742 - border-color: var(--woobot-primary);
1743 - box-shadow: 0 0 0 3px rgba(91, 78, 150, 0.15);
1744 -}
1745 -
1746 -.wpbot-session-details-page .forward-session-wrapper {
1747 - display: flex;
1748 - align-items: stretch;
1749 - gap: 0;
1750 -}
1751 -
1752 -.wpbot-session-details-page .forward-session-wrapper #details_session_email {
1753 - flex: 1;
1754 - border-radius: 8px 0 0 8px !important;
1755 - min-height: 42px;
1756 -}
1757 -
1758 -.wpbot-session-details-page .forward-session-wrapper .forward_session {
1759 - min-width: 140px;
1760 - border-radius: 0 8px 8px 0 !important;
1761 - background: var(--woobot-primary) !important;
1762 - border-color: var(--woobot-primary) !important;
1763 - color: #fff !important;
1764 - cursor: pointer;
1765 -}
1766 -
1767 -.wpbot-session-details-page .forward-session-wrapper .forward_session:hover {
1768 - background: var(--woobot-primary-dark) !important;
1769 - border-color: var(--woobot-primary-dark) !important;
1770 -}
1771 -
1772 -@media screen and (max-width: 782px) {
1773 - .wpbot-session-details-page .wpbot-reply-fab {
1774 - right: 16px;
1775 - bottom: 16px;
1776 - padding: 12px 16px;
1777 - }
1778 -
1779 - .wpbot-session-details-page .wpbot-reply-panel {
1780 - right: 16px;
1781 - bottom: 76px;
1782 - width: calc(100vw - 32px);
1783 - }
1784 -
1785 - .wpbot-session-details-page .forward-session-wrapper {
1786 - flex-direction: column;
1787 - gap: 8px;
1788 - }
1789 -
1790 - .wpbot-session-details-page .forward-session-wrapper #details_session_email,
1791 - .wpbot-session-details-page .forward-session-wrapper .forward_session {
1792 - width: 100%;
1793 - border-radius: 8px !important;
1794 - min-width: 0;
1795 - }
1796 -}
1797 -
1798 -/* ─── AI Insight locked page ──────────────────────────────────────────────── */
1799 -.wpbot-ai-insight-page {
1800 - --woobot-primary: #5B4E96;
1801 - --woobot-primary-dark: #463a7a;
1802 - --woobot-primary-soft: #f3f1fa;
1803 - --woobot-primary-border: #e4e0f2;
1804 - --woobot-text: #2d2a3a;
1805 - --woobot-muted: #6b6680;
1806 - font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1807 - max-width: 1280px;
1808 - margin: 20px auto 40px auto;
1809 -}
1810 -
1811 -.wpbot-ai-insight-page .wpbot-ai-insight-header {
1812 - background: #fff;
1813 - border: 1px solid var(--woobot-primary-border);
1814 - border-radius: 16px;
1815 - padding: 20px 24px;
1816 - margin: 0 0 20px;
1817 -}
1818 -
1819 -.wpbot-ai-insight-page .wpbot-ai-insight-header h2 {
1820 - margin: 0 0 4px !important;
1821 - padding: 0 !important;
1822 - font-size: 24px;
1823 - font-weight: 700;
1824 - color: var(--woobot-primary) !important;
1825 - line-height: 1.3;
1826 -}
1827 -
1828 -.wpbot-ai-insight-page .wpbot-ai-insight-header p {
1829 - margin: 0;
1830 - font-size: 14px;
1831 - color: var(--woobot-muted);
1832 -}
1833 -
1834 -.wpbot-ai-insight-page .wpbot-ai-insight-locked {
1835 - display: flex;
1836 - flex-direction: column;
1837 - align-items: center;
1838 - text-align: center;
1839 - background: #fff;
1840 - border: 1px solid var(--woobot-primary-border);
1841 - border-radius: 16px;
1842 - padding: 48px 36px;
1843 - box-shadow: 0 8px 28px rgba(91, 78, 150, 0.08);
1844 -}
1845 -
1846 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__icon {
1847 - display: flex;
1848 - align-items: center;
1849 - justify-content: center;
1850 - width: 72px;
1851 - height: 72px;
1852 - margin-bottom: 18px;
1853 - border-radius: 50%;
1854 - background: var(--woobot-primary-soft);
1855 - border: 1px solid var(--woobot-primary-border);
1856 -}
1857 -
1858 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__icon .dashicons {
1859 - width: 36px;
1860 - height: 36px;
1861 - font-size: 36px;
1862 - color: var(--woobot-primary);
1863 -}
1864 -
1865 -.wpbot-ai-insight-page .wpbot-ai-insight-locked h3 {
1866 - margin: 0 0 12px !important;
1867 - padding: 0 !important;
1868 - font-size: 22px;
1869 - font-weight: 700;
1870 - color: var(--woobot-primary) !important;
1871 - line-height: 1.3;
1872 -}
1873 -
1874 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__desc {
1875 - max-width: 560px;
1876 - margin: 0 0 14px;
1877 - font-size: 15px;
1878 - line-height: 1.6;
1879 - color: var(--woobot-text);
1880 -}
1881 -
1882 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__cta {
1883 - margin: 0 0 24px;
1884 - font-size: 15px;
1885 - font-weight: 700;
1886 - color: var(--woobot-primary-dark);
1887 -}
1888 -
1889 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__btn {
1890 - display: inline-flex;
1891 - align-items: center;
1892 - justify-content: center;
1893 - padding: 12px 28px;
1894 - border-radius: 8px;
1895 - background: var(--woobot-primary);
1896 - border: 2px solid var(--woobot-primary);
1897 - color: #fff !important;
1898 - font-size: 15px;
1899 - font-weight: 600;
1900 - text-decoration: none !important;
1901 - line-height: 1.2;
1902 - transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
1903 -}
1904 -
1905 -.wpbot-ai-insight-page .wpbot-ai-insight-locked__btn:hover {
1906 - background: var(--woobot-primary-dark);
1907 - border-color: var(--woobot-primary-dark);
1908 - color: #fff !important;
1909 - transform: translateY(-1px);
1910 -}
1911 -
1912 -.qchero_sliders_list_wrapper.qcld-session-history_menu_box {
1913 - max-width: 1280px;
1914 - margin: 20px auto 40px auto;
1915 -}
1916 -
1917 -table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
1918 - text-align: left;
1919 -}
1920 -
1921 -.sld_menu_title.qcld_session_chat_menu_title {
1922 - width: 100%;
1923 - max-width: 1280px;
1924 - margin: 20px auto 20px auto;
1925 -}
1926 -.qcld-session-no-record-found {
1927 - width: 100%;
1928 - max-width: 1280px;
1929 - margin: 0 auto;
1930 -}
1931 -@media screen and (max-width: 782px) {
1932 - .wpbot-ai-insight-page {
1933 - margin: 12px 0 24px;
1934 - }
1935 -
1936 - .wpbot-ai-insight-page .wpbot-ai-insight-locked {
1937 - padding: 36px 20px;
1938 - border-radius: 12px;
1939 - }
1 +/* WPBot design tokens — change colors here to theme the whole admin UI */
2 +:root {
3 + --woobot-primary: #5B4E96;
4 + --woobot-primary-color: #5B4E96;
5 + --woobot-primary-dark: #463a7a;
6 + --woobot-primary-soft: #f3f1fa;
7 + --woobot-primary-border: #e4e0f2;
8 + --woobot-surface: #ffffff;
9 + --woobot-page-bg: #F5F7FD;
10 + --woobot-text: #2d2a3a;
11 + --woobot-muted: #6b6680;
12 + --woobot-danger: #e25563;
13 + --woobot-nav-muted: #988FBD;
14 + --woobot-primary-rgb: 91, 78, 150;
15 +}
16 +.wp-chatbot-messages-wrapper{padding: 15px;padding-left: 43px;padding-right: 43px;}
17 +.wp-chatbot-messages-wrapper ul{overflow:inherit !Important}
18 +.sld_menu_title_align {
19 + text-align: right;
20 +}
21 +
22 +#wpbot_checked_all{opacity:1 !important}
23 +.wpbot_sessions_checkbox{opacity:1 !important}
24 +
25 +/* The Modal (background) */
26 +.wpcsmodal {
27 + display: none; /* Hidden by default */
28 + position: fixed; /* Stay in place */
29 + z-index: 1; /* Sit on top */
30 + padding-top: 100px; /* Location of the box */
31 + left: 0;
32 + top: 0;
33 + width: 100%; /* Full width */
34 + height: 100%; /* Full height */
35 + overflow: auto; /* Enable scroll if needed */
36 + background-color: rgb(0,0,0); /* Fallback color */
37 + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
38 +}
39 +
40 +/* Modal Content */
41 +.wpcsmodal-content {
42 + background-color: #fefefe;
43 + margin: auto;
44 + padding: 20px;
45 + border: 1px solid #888;
46 + width: 80%;
47 +}
48 +
49 +/* The Close Button */
50 +.wpcsclose {
51 + color: #aaaaaa;
52 + float: right;
53 + font-size: 28px;
54 + font-weight: bold;
55 +}
56 +
57 +.wpcsclose:hover,
58 +.wpcsclose:focus {
59 + color: #000;
60 + text-decoration: none;
61 + cursor: pointer;
62 +}
63 +
64 +
65 +.wpcs_text_field {
66 + width: 100%;
67 + padding: 12px 20px;
68 + margin: 8px 0;
69 + display: inline-block;
70 + border: 1px solid #ccc;
71 + border-radius: 4px;
72 + box-sizing: border-box;
73 +}
74 +
75 +.wpcs_submit_field {
76 + background-color: #4CAF50;
77 + color: white;
78 + padding: 10px 20px;
79 + margin: 8px 0;
80 + border: none;
81 + border-radius: 4px;
82 + cursor: pointer;
83 +}
84 +
85 +.wpcs_submit_field:hover {
86 + background-color: #45a049;
87 +}
88 +
89 +.wpcs_form_container {
90 + border-radius: 5px;
91 + background-color: #f2f2f2;
92 + padding: 20px;
93 +}
94 +.wpcs_form_container form{width:100%}
95 +.wpvo_filter_session{
96 + float: right;
97 +}
98 +.wpvo_filter_session .filter_session_start_date,.wpvo_filter_session .filter_session_end_date, .wpvo_filter_session .filter_session_button{
99 + float: left;
100 + margin-right: 5px;
101 +}
102 +.wpvo_filter_session .filter_session_button{
103 + background-color: #00cec9;
104 + border-radius: 5px;
105 + padding: 7px 15px;
106 + color: #fff;
107 +}
108 +
109 +.qcld-session-history_menu_box {
110 + background: #ffffff00;
111 + width: 100%;
112 +}
113 +.sld_menu_title.sld_menu_title_align {
114 + width: 98%;
115 +}
116 +.qcld-session-history_menu_title{
117 + display: flex;
118 + column-gap: 15px;
119 + row-gap: 10px;
120 + background: #fff;
121 + padding: 20px;
122 + margin: 20px 0 0 0;
123 + border-radius: 16px;
124 + justify-content: space-between;
125 + width: 100%;
126 + box-sizing: border-box;
127 + flex-direction: column;
128 +}
129 +.qcld-session-history_menu_title h2 {
130 + margin: 0 !important;
131 + padding: 0 !important;
132 + font-weight: 700;
133 + font-size: 24px;
134 + color: var(--woobot-primary) !important;
135 + line-height: normal;
136 +}
137 +.qcld-session-history_menu_box form#wpcs_form_sessions {
138 + row-gap: 10px;
139 + background: #fff;
140 + padding: 20px;
141 + margin: 20px 0 0 0;
142 + border-radius: 16px;
143 + width: 100%;
144 + box-sizing: border-box;
145 +}
146 +.qcld-session-history_menu_box .btn.btn-primary {
147 + padding: 8px 24px;
148 + width: auto;
149 + font-size: 15px;
150 + font-weight: 500;
151 + border-radius: 8px;
152 + position: relative;
153 + background: #fff;
154 + color: var(--woobot-primary-color);
155 + text-decoration: none;
156 + line-height: normal;
157 + border: 2px solid var(--woobot-primary-color);
158 +}
159 +
160 +.qcld-session-history_menu_box .btn.btn-primary:hover {
161 + padding: 8px 24px;
162 + width: auto;
163 + font-size: 15px;
164 + font-weight: 500;
165 + border-radius: 8px;
166 + position: relative;
167 + background: var(--woobot-primary-color);
168 + color: #34079b;
169 + text-decoration: none;
170 + line-height: normal;
171 + border: 2px solid var(--woobot-primary-color);
172 +}
173 +
174 +.qcld-session-history_menu_box a.btn.btn-success {
175 + padding: 8px 24px;
176 + width: auto;
177 + font-size: 15px;
178 + font-weight: 500;
179 + border-radius: 8px;
180 + position: relative;
181 + background: #fff;
182 + color: var(--woobot-primary-color);
183 + text-decoration: none;
184 + line-height: normal;
185 + border: 2px solid var(--woobot-primary-color);
186 +}
187 +
188 +.qcld-session-history_menu_box a.btn.btn-success:hover {
189 + padding: 8px 24px;
190 + width: auto;
191 + font-size: 15px;
192 + font-weight: 500;
193 + border-radius: 8px;
194 + position: relative;
195 + background: var(--woobot-primary-color);
196 + color: #fff;
197 + text-decoration: none;
198 + line-height: normal;
199 + border: 2px solid var(--woobot-primary-color);
200 +}
201 +
202 +.qcld-session-history_menu_box table#chatsession-table a:not(.btn) {
203 + color: var(--woobot-primary);
204 + font-weight: 500;
205 + text-decoration: none;
206 +}
207 +
208 +.qcld-session-history_menu_box table#chatsession-table a:not(.btn):hover {
209 + color: var(--woobot-primary-dark);
210 + text-decoration: underline;
211 +}
212 +
213 +table#chatsession-table {
214 + margin: 0;
215 + padding: 0;
216 +}
217 +
218 +.qcld_session_history_result {
219 +
220 + background: #fff;
221 + padding: 20px;
222 + margin: 20px 0 20px 0;
223 + border-radius: 16px;
224 + width: 100%;
225 +}
226 +.single-chat-container-wrapper {
227 + background-color: #fff;
228 + border-left: none;
229 + margin-top: 20px;
230 + padding: 25px;
231 + background: #fff;
232 + padding: 20px;
233 + margin: 20px 0 20px 0;
234 + border-radius: 16px;
235 + width: 100%;
236 +}
237 +
238 +.qcld_session_history_result .btn.btn-primary {
239 + padding: 10px 24px;
240 + width: auto;
241 + font-size: 15px;
242 + font-weight: 500;
243 + border-radius: 8px;
244 + position: relative;
245 + background: #fff;
246 + color: var(--woobot-primary-color);
247 + text-decoration: none;
248 + line-height: normal;
249 + border: 2px solid var(--woobot-primary-color);
250 +}
251 +
252 +.qcld_session_history_result a.btn.btn-secondary {
253 + padding: 10px 24px;
254 + width: auto;
255 + font-size: 15px;
256 + font-weight: 500;
257 + border-radius: 8px;
258 + position: relative;
259 + background: var(--woobot-primary-color);
260 + color: #fff;
261 + text-decoration: none;
262 + line-height: normal;
263 + border: 2px solid var(--woobot-primary-color);
264 +}
265 +
266 +.sld_menu_title.qcld_session_chat_menu_title {
267 + display: flex
268 +;
269 + column-gap: 15px;
270 + row-gap: 10px;
271 + background: #fff;
272 + padding: 20px;
273 + margin: 20px 0 20px 0;
274 + border-radius: 16px;
275 + justify-content: space-between;
276 + width: 99%;
277 +}
278 +
279 +.qcld-session-yes-record-found{
280 + display: flex
281 +;
282 + column-gap: 15px;
283 + row-gap: 10px;
284 + background: #fff;
285 + padding: 20px;
286 + margin: 20px 0 20px 0;
287 + border-radius: 16px;
288 + justify-content: space-between;
289 + width: 99%;
290 +}
291 +.qcld-session-no-record-found{
292 + display: flex
293 +;
294 + column-gap: 15px;
295 + row-gap: 10px;
296 + background: #fff;
297 + padding: 20px;
298 + margin: 20px 0 20px 0;
299 + border-radius: 16px;
300 + justify-content: space-between;
301 + width: 99%;
302 +}
303 +.sld_menu_title.qcld_session_chat_menu_title h2 {
304 + margin: 0 !important;
305 + padding: 0 0 0 0 !important;
306 + font-weight: bold;
307 + font-size: 24px;
308 + color: var(--woobot-primary-color) !important;
309 + line-height: normal;
310 +}
311 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-agent {
312 + display: none;
313 +}
314 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
315 + display: flex;
316 + align-items: center;
317 + gap: 6px;
318 + width: 90%;
319 +}
320 +.toplevel_page_wbcs-botsessions-page li.wp-chat-user-msg {
321 + flex-direction: row-reverse;
322 + justify-content: flex-start;
323 + display: flex;
324 + text-align: right;
325 + align-items: center;
326 + gap: 20px;
327 + width: 90%;
328 + float: right;
329 + margin-right: 40px;
330 +}
331 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
332 + display: flex;
333 + align-items: center;
334 + gap: 6px;
335 + width: 90%;
336 +}
337 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph p {
338 + margin: 0;
339 + padding: 0;
340 +}
341 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph {
342 + background: #eee;
343 + padding: 6px 12px;
344 + border-radius: 8px;
345 +}
346 +
347 +.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
348 + text-align: right;
349 + float: right;
350 +}
351 +.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
352 + right: 12px;
353 + position: relative;
354 +}
355 +.toplevel_page_wbcs-botsessions-page #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
356 + width: 40px !important;
357 + height: 40px !important;
358 + border-radius:50%;
359 +}
360 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
361 + display: flex;
362 + align-items: center;
363 + gap: 6px;
364 +}
365 +div#session_details_modal {
366 + display: none;
367 + position: fixed;
368 + inset: 0;
369 + width: 100%;
370 + height: 100%;
371 + top: 0;
372 + left: 0 !important;
373 + right: 0;
374 + background: rgba(45, 42, 58, 0.45) !important;
375 + border-radius: 0;
376 + box-shadow: none;
377 + overflow: auto;
378 + z-index: 100000;
379 +}
380 +
381 +div#session_details_modal .modal-content {
382 + position: absolute;
383 + top: 50%;
384 + left: 50%;
385 + transform: translate(-50%, -50%);
386 + margin: 0;
387 + padding: 0;
388 + border: 1px solid var(--woobot-primary-border);
389 + width: calc(100% - 40px);
390 + max-width: 720px;
391 + height: auto;
392 + max-height: min(860px, calc(100vh - 48px));
393 + background: #fff;
394 + border-radius: 16px;
395 + box-shadow: 0 16px 48px rgba(var(--woobot-primary-rgb), 0.22);
396 + overflow: hidden;
397 + display: flex;
398 + flex-direction: column;
399 +}
400 +
401 +div#session_details_modal .details_session_close {
402 + position: absolute;
403 + top: 12px;
404 + right: 12px;
405 + z-index: 10001;
406 + color: #fff;
407 + background: var(--woobot-primary);
408 + font-size: 20px;
409 + font-weight: 600;
410 + cursor: pointer;
411 + height: 32px;
412 + width: 32px;
413 + border-radius: 50%;
414 + text-align: center;
415 + line-height: 30px;
416 + box-shadow: 0 2px 8px rgba(var(--woobot-primary-rgb), 0.25);
417 + transition: background 0.15s ease;
418 +}
419 +
420 +div#session_details_modal .details_session_close:hover {
421 + background: var(--woobot-primary-dark);
422 +}
423 +
424 +div#session_details_modal .details_modal_body {
425 + display: flex;
426 + flex-direction: column;
427 + height: 100%;
428 + max-height: min(860px, calc(100vh - 48px));
429 + overflow: hidden;
430 + background: #fff;
431 +}
432 +
433 +div#session_details_modal .session-details-sction-modal {
434 + flex: 1 1 auto;
435 + max-height: none;
436 + overflow-x: hidden;
437 + overflow-y: auto;
438 + padding: 16px 20px 12px;
439 + background: #faf9fd;
440 +}
441 +
442 +div#session_details_modal .session-details-sction-modal::-webkit-scrollbar {
443 + width: 8px;
444 +}
445 +
446 +div#session_details_modal .session-details-sction-modal::-webkit-scrollbar-thumb {
447 + background: #c9c4db;
448 + border-radius: 8px;
449 +}
450 +
451 +/* Source URL bar inside modal */
452 +div#session_details_modal li.session_start_url {
453 + background: var(--woobot-primary) !important;
454 + padding: 12px 16px;
455 + margin: 0 0 16px;
456 + color: #fff;
457 + border-radius: 10px;
458 + list-style: none;
459 + font-size: 13px;
460 +}
461 +
462 +div#session_details_modal li.session_start_url span {
463 + font-weight: 600;
464 +}
465 +
466 +div#session_details_modal li.session_start_url a {
467 + color: #fff;
468 + text-decoration: underline;
469 + word-break: break-all;
470 +}
471 +
472 +/* Chat bubbles in modal */
473 +div#session_details_modal .wp-chatbot-paragraph {
474 + background: #fff !important;
475 + border: 1px solid var(--woobot-primary-border);
476 + padding: 10px 14px !important;
477 + border-radius: 12px !important;
478 + box-shadow: 0 1px 3px rgba(var(--woobot-primary-rgb), 0.06);
479 +}
480 +
481 +div#session_details_modal li.wp-chat-user-msg .wp-chatbot-paragraph {
482 + background: var(--woobot-primary-soft) !important;
483 + border-color: #ddd6f3;
484 +}
485 +
486 +div#session_details_modal .wp-chatbot-avatar img {
487 + width: 36px !important;
488 + height: 36px !important;
489 + border-radius: 50%;
490 + border: 2px solid var(--woobot-primary-border);
491 +}
492 +
493 +/* Email reply panel */
494 +div#session_details_modal .email-reply-container {
495 + flex: 0 0 auto;
496 + margin: 0 !important;
497 + padding: 18px 20px 20px !important;
498 + border-top: 1px solid var(--woobot-primary-border) !important;
499 + background: #fff !important;
500 + border-radius: 0 !important;
501 +}
502 +
503 +div#session_details_modal .email-reply-container .email-reply-meta {
504 + display: flex;
505 + flex-wrap: wrap;
506 + align-items: center;
507 + gap: 8px 14px;
508 + margin: 0 0 12px;
509 + font-size: 13px;
510 + color: var(--woobot-text);
511 +}
512 +
513 +div#session_details_modal .email-reply-container .email-reply-meta strong {
514 + color: var(--woobot-primary);
515 + font-weight: 600;
516 +}
517 +
518 +div#session_details_modal .email-reply-container .email-reply-meta a {
519 + color: var(--woobot-primary);
520 + font-weight: 500;
521 +}
522 +
523 +div#session_details_modal .email-reply-container #reply_from_email,
524 +div#session_details_modal .email-reply-container #reply_subject,
525 +div#session_details_modal .email-reply-container #reply_message {
526 + width: 100%;
527 + box-sizing: border-box;
528 + border: 1px solid var(--woobot-primary-border);
529 + border-radius: 8px;
530 + padding: 10px 12px;
531 + font-size: 13px;
532 + color: var(--woobot-text);
533 + background: #fff;
534 + box-shadow: none;
535 + outline: none;
536 + transition: border-color 0.15s ease, box-shadow 0.15s ease;
537 +}
538 +
539 +div#session_details_modal .email-reply-container #reply_from_email {
540 + width: auto;
541 + min-width: 200px;
542 + max-width: 100%;
543 + padding: 8px 12px;
544 +}
545 +
546 +div#session_details_modal .email-reply-container #reply_from_email:focus,
547 +div#session_details_modal .email-reply-container #reply_subject:focus,
548 +div#session_details_modal .email-reply-container #reply_message:focus {
549 + border-color: var(--woobot-primary);
550 + box-shadow: 0 0 0 3px rgba(var(--woobot-primary-rgb), 0.15);
551 +}
552 +
553 +div#session_details_modal .email-reply-container .form-group {
554 + margin-bottom: 10px !important;
555 +}
556 +
557 +div#session_details_modal .email-reply-container #btn_send_reply_email {
558 + background: var(--woobot-primary) !important;
559 + color: #fff !important;
560 + border: none !important;
561 + padding: 10px 20px !important;
562 + border-radius: 8px !important;
563 + font-size: 14px;
564 + font-weight: 600;
565 + cursor: pointer;
566 + transition: background 0.15s ease;
567 +}
568 +
569 +div#session_details_modal .email-reply-container #btn_send_reply_email:hover:not(:disabled) {
570 + background: var(--woobot-primary-dark) !important;
571 +}
572 +
573 +div#session_details_modal .email-reply-container #btn_send_reply_email:disabled {
574 + opacity: 0.55;
575 + cursor: not-allowed;
576 +}
577 +
578 +div#session_details_modal .email-reply-warning {
579 + margin: 0 0 12px;
580 + color: #c93f4d;
581 + font-weight: 600;
582 + font-size: 13px;
583 +}
584 +
585 +.loader-mask {
586 + height: 200px;
587 +}
588 +.loader {
589 + position: absolute;
590 + left: 50%;
591 + top: 50%;
592 + width: 50px;
593 + height: 50px;
594 + font-size: 0;
595 + color: var(--woobot-primary);
596 + display: inline-block !important;
597 + margin: -25px 0 0 -25px;
598 + text-indent: -9999em;
599 + -webkit-transform: translateZ(0);
600 + -ms-transform: translateZ(0);
601 + transform: translateZ(0);
602 +}
603 +.lead{
604 + font-size:13px;
605 +}
606 +.loader div {
607 + background-color: var(--woobot-primary);
608 + display: inline-block;
609 + float: none;
610 + position: absolute;
611 + top: 0;
612 + left: 0;
613 + width: 50px;
614 + height: 50px;
615 + opacity: .5;
616 + border-radius: 50%;
617 + -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
618 + animation: ballPulseDouble 2s ease-in-out infinite;
619 +}
620 +.loader div:last-child {
621 + -webkit-animation-delay: -1s;
622 + animation-delay: -1s;
623 +}
624 +@-webkit-keyframes ballPulseDouble {
625 + 0%,
626 + 100% {
627 + -webkit-transform: scale(0);
628 + transform: scale(0);
629 + }
630 + 50% {
631 + -webkit-transform: scale(1);
632 + transform: scale(1);
633 + }
634 +}
635 +@keyframes ballPulseDouble {
636 + 0%,
637 + 100% {
638 + -webkit-transform: scale(0);
639 + transform: scale(0);
640 + }
641 + 50% {
642 + -webkit-transform: scale(1);
643 + transform: scale(1);
644 + }
645 +}
646 +
647 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-agent {
648 + display: none;
649 +}
650 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
651 + display: flex;
652 + align-items: center;
653 + gap: 6px;
654 + width: 90%;
655 +}
656 +.qcld-like-dislike-icon {
657 + display: flex;
658 + gap: 6px;
659 + padding-top: 5px;
660 +}
661 +.toplevel_page_wbcs-botsessions-page li.wp-chat-user-msg {
662 + display: flex;
663 + justify-content: flex-start;
664 + text-align: right;
665 + align-items: center;
666 + gap: 20px;
667 + width: 90%;
668 + float: right;
669 + margin-right: 0px;
670 +}
671 +
672 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
673 + display: flex;
674 + align-items: center;
675 + gap: 6px;
676 + width: 90%;
677 +}
678 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph p {
679 + margin: 0;
680 + padding: 0;
681 +}
682 +.toplevel_page_wbcs-botsessions-page .wp-chatbot-paragraph {
683 + background: #eee;
684 + padding: 6px 12px;
685 + border-radius: 8px;
686 +}
687 +
688 +.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
689 + text-align: right;
690 + float: right;
691 +}
692 +.toplevel_page_wbcs-botsessions-page ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
693 + right: 12px;
694 + position: relative;
695 +}
696 +.toplevel_page_wbcs-botsessions-page #wp-chatbot-messages-container .wp-chatbot-avatar img, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar img {
697 + width: 40px !important;
698 + height: 40px !important;
699 +border-radius:50%;
700 +}
701 +.toplevel_page_wbcs-botsessions-page li.wp-chatbot-msg {
702 + display: flex;
703 + align-items: center;
704 + gap: 6px;
705 +}
706 +
707 +#session_details_modal ul{
708 + margin: 0;
709 + padding: 0;
710 +}
711 +table#chatsession-table td.text-left:nth-child(2) {
712 + max-width: 220px;
713 +}
714 +
715 +
716 +div#wpchatbot-sessioncorn-settings {
717 + display: flex;
718 + column-gap: 15px;
719 + row-gap: 10px;
720 + background: #fff;
721 + padding: 20px;
722 + margin: 0 0 0 0;
723 + border-radius: 16px;
724 + justify-content: space-between;
725 + width: 96%;
726 + flex-direction: column;
727 +}
728 +div#wpchatbot-sessioncorn-settings button#save_wpsseion_corn_setting {
729 + display: block;
730 + max-width: 220px;
731 + border: none;
732 +}
733 +div#wpchatbot-sessioncorn-mannual {
734 + width: 100%;
735 +}
736 +div#wpchatbot-sessioncorn-mannual {
737 + width: 98%;
738 + margin: 20px 0 0 0;
739 +}
740 +div#wpchatbot-sessioncorn-mannual #swpsseion_mannual_scraper_corn {
741 + width: 98%;
742 + border: none;
743 +}
744 +div#wpchatbot-sessioncorn-settings textarea {
745 + width: 100%;
746 + height: 120px !important;
747 +}
748 +div#wpchatbot-sessioncorn-mannual {
749 + width: 98%;
750 + margin: 20px 0 0 0;
751 + border-radius: 16px;
752 +}
753 +
754 +div#wpchatbot-sessioncorn-mannual #swpsseion_mannual_scraper_corn {
755 + width: auto;
756 + border: none;
757 + margin: 0 !important;
758 +}
759 +div#wpchatbot-sessioncorn-mannual input#wpchatbot-sessioncorn-mannual-number {
760 + padding: 0 10px;
761 + margin: 0 12px;
762 +}
763 +
764 +div#wpchatbot-sessioncorn-mannual {
765 + width: 96%;
766 + padding: 20px;
767 +}
768 +.qcld-bit-session-form-group-outer {
769 + display: flex;
770 + justify-content: space-between;
771 + width: 100%;
772 + gap: 20px;
773 +}
774 +.qcld-bit-session-form-group-outer .form-group {
775 + width: 100%;
776 +}
777 +
778 +.qcld-bit-session-form-group-outer .form-group input{
779 + width: 100%;
780 +}
781 +
782 +
783 +.qcld-bit-session-form-group-outer .form-group select{
784 + width: 100% !important;
785 + max-width: inherit !important;
786 +}
787 +
788 +/**Admin notice style**/
789 +.qcld-wpbot-updated {
790 + display: flex;
791 + column-gap: 15px;
792 + row-gap: 10px;
793 + background: #fff;
794 + padding: 22px 20px;
795 + margin: 20px 0 20px 0;
796 + border-radius: 16px;
797 + flex-direction: column;
798 + width: 96%;
799 +}
800 +.qcld-wpbot-updated p {
801 + margin: 0;
802 + padding: 0;
803 + font-size: 16px;
804 + font-family: "DM Sans", sans-serif !important;
805 +}
806 +
807 +.qcld-wpbot-updated a.button-primary.button-large {
808 + background: var(--woobot-primary-color);
809 + color: #ffffff;
810 + border: none;
811 + padding: 5px 25px;
812 + line-height: 28px;
813 + font-weight: bold;
814 + border: 2px solid var(--woobot-primary-color);
815 + border-radius: 8px;
816 +}
817 +.qcld-wpbot-updated a.button-primary.button-large:hover {
818 + background: #fff;
819 + color: var(--woobot-primary-color);;
820 + border: none;
821 + padding: 5px 25px;
822 + line-height: 28px;
823 + font-weight: bold;
824 + border: 2px solid var(--woobot-primary-color);
825 + border-radius: 8px;
826 +}
827 +#swpsseion_mannual_scraper_corn, #save_wpsseion_corn_setting {
828 + padding: 14px 30px;
829 + width: auto;
830 + font-size: 16px;
831 + font-weight: 500;
832 + color: var(--woobot-nav-muted);
833 + border-radius: 8px;
834 + position: relative;
835 + display: inline-block;
836 + align-items: center;
837 + gap: 15px;
838 + background: var(--woobot-primary-color);
839 + color: #ffffff;
840 + text-decoration: none;
841 + border-color: var(--woobot-primary-color) !important;
842 + line-height: normal;
843 + margin: 20px 0 20px 0 !important;
844 + cursor: pointer;
845 +}
846 +.qcld-wpbot-updated a.button-secondary.button-large {
847 + border: 2px solid var(--woobot-primary-color);
848 + background: #fff;
849 + color: var(--woobot-primary-color);
850 + padding: 8px 20px;
851 + border-radius: 8px;
852 + display: inline-block;
853 + margin: 0;
854 + line-height: 28px;
855 + padding: 5px 25px;
856 + line-height: 28px;
857 + font-weight: bold;
858 +}
859 +.qcld-wpbot-updated a.button-secondary.button-large:hover {
860 + border: 2px solid var(--woobot-primary-color);
861 + background: var(--woobot-primary-color);
862 + color: #fff;
863 + padding: 8px 20px;
864 + border-radius: 8px;
865 + display: inline-block;
866 + margin: 0;
867 + line-height: 28px;
868 + padding: 5px 25px;
869 + line-height: 28px;
870 + font-weight: bold;
871 +}
872 +div#wpchatbot-sessioncorn-mannual input#wpchatbot-sessioncorn-mannual-number {
873 + padding: 2px 5px;
874 + margin: 0 12px;
875 + max-width: 60px;
876 + background: transparent;
877 + /* color: #ffff;
878 + border-color: #fff; */
879 +}
880 +
881 +
882 +.qcld-session-history_menu_box .btn.btn-primary {
883 + background: var(--woobot-primary) !important;
884 + color: #fff !important;
885 + margin: 0 0 3px 0;
886 +}
887 +.qcld-session-history_menu_box a.btn.btn-success {
888 + padding: 8px 24px;
889 + width: auto;
890 + font-size: 15px;
891 + font-weight: 500;
892 + border-radius: 8px;
893 + position: relative;
894 + background: #ffffff;
895 + color: var(--woobot-primary);
896 + text-decoration: none;
897 + line-height: normal;
898 + border: 2px solid var(--woobot-primary);
899 +}
900 +.qcld-session-history_menu_box a.btn.btn-success:hover {
901 + padding: 8px 24px;
902 + width: auto;
903 + font-size: 15px;
904 + font-weight: 500;
905 + border-radius: 8px;
906 + position: relative;
907 + background: var(--woobot-primary);
908 + color: #fff;
909 + text-decoration: none;
910 + line-height: normal;
911 + border: 2px solid var(--woobot-primary);
912 +}
913 +
914 +li.session_start_url span {
915 + font-weight: bold;
916 +}
917 +li.session_start_url {
918 + background: var(--woobot-primary) !important;
919 + padding: 8px 8px;
920 + color: #fff;
921 + border-radius: 6px;
922 +}
923 +li.session_start_url a {
924 + color: #fff;
925 +}
926 +.qcld-like-dislike-icon a i {
927 + font-size: 16px;
928 +}
929 +
930 +.forward-session-wrapper-detailspage {
931 + position: fixed;
932 + bottom: 0;
933 + left: 160px;
934 + right: 0;
935 + width: auto;
936 + max-width: none;
937 + margin: 0;
938 + background: #fff;
939 + padding: 18px 24px;
940 + z-index: 10050;
941 + opacity: 0;
942 + visibility: hidden;
943 + pointer-events: none;
944 + transform: translateY(100%);
945 + transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
946 + box-shadow: 0 -8px 28px rgba(var(--woobot-primary-rgb), 0.12);
947 + border-top: 1px solid var(--woobot-primary-border);
948 + max-height: 55vh;
949 + overflow-y: auto;
950 + box-sizing: border-box;
951 +}
952 +
953 +.forward-session-wrapper-detailspage.is-visible {
954 + opacity: 1;
955 + visibility: visible;
956 + pointer-events: auto;
957 + transform: translateY(0);
958 +}
959 +
960 +body.folded .forward-session-wrapper-detailspage {
961 + left: 36px;
962 +}
963 +
964 +@media screen and (max-width: 960px) {
965 + .forward-session-wrapper-detailspage,
966 + body.folded .forward-session-wrapper-detailspage {
967 + left: 0;
968 + }
969 +}
970 +
971 +@media screen and (max-width: 782px) {
972 + div#session_details_modal .modal-content {
973 + width: calc(100% - 24px);
974 + max-height: calc(100vh - 24px);
975 + border-radius: 12px;
976 + }
977 +
978 + div#session_details_modal .email-reply-container #reply_from_email {
979 + min-width: 100%;
980 + }
981 +}
982 +
983 +/* ─── Modern Sessions UI (plugin palette) ─────────────────────────────────── */
984 +.qcld-session-history_menu_box {
985 + --woobot-primary: #5B4E96;
986 + --woobot-primary-color: #5B4E96;
987 + --woobot-primary-dark: #463a7a;
988 + --woobot-primary-soft: #f3f1fa;
989 + --woobot-primary-border: #e4e0f2;
990 + --woobot-surface: #ffffff;
991 + --woobot-page-bg: #F5F7FD;
992 + --woobot-text: #2d2a3a;
993 + --woobot-muted: #6b6680;
994 + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
995 +}
996 +
997 +/* Email notification toggle */
998 +.qcld-session-email-notice {
999 + display: flex;
1000 + align-items: center;
1001 + background: var(--woobot-primary-soft);
1002 + border: 1px solid var(--woobot-primary-border);
1003 + border-radius: 12px;
1004 + padding: 14px 18px;
1005 + margin: 8px 0 20px;
1006 + max-width: 100%;
1007 +}
1008 +
1009 +.qcld-session-email-notice__label {
1010 + display: flex;
1011 + align-items: center;
1012 + gap: 12px;
1013 + margin: 0;
1014 + cursor: pointer;
1015 + font-size: 14px;
1016 + font-weight: 500;
1017 + color: var(--woobot-primary-color);
1018 + line-height: 1.4;
1019 +}
1020 +
1021 +.qcld-session-email-notice__input {
1022 + position: absolute !important;
1023 + opacity: 0 !important;
1024 + width: 0 !important;
1025 + height: 0 !important;
1026 + margin: 0 !important;
1027 + padding: 0 !important;
1028 +}
1029 +
1030 +.qcld-session-email-notice__switch {
1031 + position: relative;
1032 + flex-shrink: 0;
1033 + width: 44px;
1034 + height: 24px;
1035 + background: #c9c4db;
1036 + border-radius: 999px;
1037 + transition: background 0.2s ease;
1038 +}
1039 +
1040 +.qcld-session-email-notice__switch::after {
1041 + content: "";
1042 + position: absolute;
1043 + top: 3px;
1044 + left: 3px;
1045 + width: 18px;
1046 + height: 18px;
1047 + background: #fff;
1048 + border-radius: 50%;
1049 + box-shadow: 0 1px 3px rgba(var(--woobot-primary-rgb), 0.25);
1050 + transition: transform 0.2s ease;
1051 +}
1052 +
1053 +.qcld-session-email-notice__input:checked + .qcld-session-email-notice__switch {
1054 + background: var(--woobot-primary-color);
1055 +}
1056 +
1057 +.qcld-session-email-notice__input:checked + .qcld-session-email-notice__switch::after {
1058 + transform: translateX(20px);
1059 +}
1060 +
1061 +.qcld-session-email-notice__input:focus-visible + .qcld-session-email-notice__switch {
1062 + outline: 2px solid var(--woobot-primary-color);
1063 + outline-offset: 2px;
1064 +}
1065 +
1066 +.qcld-session-email-notice__text {
1067 + color: var(--woobot-text);
1068 +}
1069 +
1070 +/* Top page pagination bar */
1071 +.qcld-session-history_menu_box .sld_menu_title.sld_menu_title_align,
1072 +.qcld-session-history_menu_box .qcld-session-pagination-bar {
1073 + display: flex;
1074 + justify-content: flex-end;
1075 + align-items: center;
1076 + background: var(--woobot-surface);
1077 + padding: 14px 20px;
1078 + margin: 16px 0 0;
1079 + border-radius: 16px;
1080 + width: 98%;
1081 + box-sizing: border-box;
1082 +}
1083 +
1084 +.qcld-session-pagination {
1085 + display: flex;
1086 + align-items: center;
1087 + flex-wrap: wrap;
1088 + gap: 8px;
1089 +}
1090 +
1091 +.qcld-session-history_menu_box .wpbot_pagination {
1092 + margin-right: 8px;
1093 + font-size: 13px;
1094 + font-weight: 600;
1095 + color: var(--woobot-muted);
1096 +}
1097 +
1098 +.qcld-session-history_menu_box a.page-numbers,
1099 +.qcld-session-history_menu_box span.page-numbers {
1100 + display: inline-flex;
1101 + align-items: center;
1102 + justify-content: center;
1103 + min-width: 34px;
1104 + height: 34px;
1105 + padding: 0 10px;
1106 + margin: 0 2px;
1107 + border-radius: 8px;
1108 + border: 1px solid var(--woobot-primary-border);
1109 + background: #fff;
1110 + color: var(--woobot-primary-color);
1111 + font-size: 13px;
1112 + font-weight: 600;
1113 + line-height: 1;
1114 + text-decoration: none;
1115 + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1116 +}
1117 +
1118 +.qcld-session-history_menu_box a.page-numbers:hover {
1119 + background: var(--woobot-primary-soft);
1120 + border-color: var(--woobot-primary-color);
1121 + color: var(--woobot-primary-dark);
1122 +}
1123 +
1124 +.qcld-session-history_menu_box span.page-numbers.current {
1125 + background: var(--woobot-primary-color);
1126 + border-color: var(--woobot-primary-color);
1127 + color: #fff;
1128 +}
1129 +
1130 +.qcld-session-history_menu_box span.page-numbers.dots {
1131 + border: none;
1132 + background: transparent;
1133 + color: var(--woobot-muted);
1134 + min-width: auto;
1135 + padding: 0 4px;
1136 +}
1137 +
1138 +/* DataTables toolbar: entries + search */
1139 +.qcld-session-history_menu_box div.dt-container {
1140 + margin-top: 8px;
1141 +}
1142 +
1143 +.qcld-session-history_menu_box div.dt-container .dt-layout-row {
1144 + display: flex;
1145 + flex-wrap: wrap;
1146 + align-items: center;
1147 + justify-content: space-between;
1148 + gap: 12px;
1149 + margin-bottom: 14px;
1150 +}
1151 +
1152 +.qcld-session-history_menu_box div.dt-container .dt-length,
1153 +.qcld-session-history_menu_box div.dt-container .dt-search {
1154 + display: flex;
1155 + align-items: center;
1156 + gap: 8px;
1157 + font-size: 13px;
1158 + font-weight: 500;
1159 + color: var(--woobot-muted);
1160 +}
1161 +
1162 +.qcld-session-history_menu_box div.dt-container select.dt-input,
1163 +.qcld-session-history_menu_box div.dt-container input.dt-input {
1164 + min-width: 72px;
1165 + height: 38px;
1166 + padding: 6px 12px;
1167 + border: 1px solid var(--woobot-primary-border);
1168 + border-radius: 8px;
1169 + background: #fff;
1170 + color: var(--woobot-text);
1171 + font-size: 13px;
1172 + font-weight: 500;
1173 + box-shadow: none;
1174 + outline: none;
1175 + transition: border-color 0.15s ease, box-shadow 0.15s ease;
1176 + line-height: 28px;
1177 +}
1178 +
1179 +.qcld-like-dislike-icon a:focus {
1180 + outline: 0;
1181 + outline-offset: 0;
1182 + box-shadow: none;
1183 + text-decoration: none;
1184 +}
1185 +
1186 +.qcld-session-history_menu_box div.dt-container input.dt-input {
1187 + min-width: 200px;
1188 +}
1189 +
1190 +.qcld-session-history_menu_box div.dt-container select.dt-input:focus,
1191 +.qcld-session-history_menu_box div.dt-container input.dt-input:focus {
1192 + border-color: var(--woobot-primary-color);
1193 + box-shadow: 0 0 0 3px rgba(var(--woobot-primary-rgb), 0.15);
1194 +}
1195 +
1196 +/* Sessions table */
1197 +.qcld-session-history_menu_box .chatsession_table_area {
1198 + overflow-x: auto;
1199 +}
1200 +
1201 +.qcld-session-history_menu_box table#chatsession-table {
1202 + width: 100% !important;
1203 + border-collapse: separate;
1204 + border-spacing: 0;
1205 + border: 1px solid var(--woobot-primary-border);
1206 + border-radius: 12px;
1207 + overflow: hidden;
1208 + background: #fff;
1209 +}
1210 +
1211 +.qcld-session-history_menu_box table#chatsession-table thead tr.table-primary,
1212 +.qcld-session-history_menu_box table#chatsession-table thead tr {
1213 + background: var(--woobot-primary-color) !important;
1214 +}
1215 +
1216 +.qcld-session-history_menu_box table#chatsession-table thead th {
1217 + background: var(--woobot-primary-color) !important;
1218 + color: #fff !important;
1219 + font-size: 13px;
1220 + font-weight: 600;
1221 + letter-spacing: 0.02em;
1222 + padding: 14px 12px !important;
1223 + border: none !important;
1224 + vertical-align: middle;
1225 + white-space: nowrap;
1226 +}
1227 +
1228 +.qcld-session-history_menu_box table#chatsession-table tbody td {
1229 + background: #fff !important;
1230 + color: var(--woobot-text) !important;
1231 + font-size: 13px;
1232 + padding: 14px 12px !important;
1233 + border-top: 1px solid #eef0f6 !important;
1234 + border-bottom: none !important;
1235 + border-left: none !important;
1236 + border-right: none !important;
1237 + border-radius: 0 !important;
1238 + vertical-align: middle;
1239 +}
1240 +
1241 +.qcld-session-history_menu_box table#chatsession-table.table-striped > tbody > tr:nth-of-type(odd) > * {
1242 + background: #faf9fd !important;
1243 + box-shadow: none !important;
1244 +}
1245 +
1246 +.qcld-session-history_menu_box table#chatsession-table tbody tr:hover > * {
1247 + background: var(--woobot-primary-soft) !important;
1248 +}
1249 +
1250 +.qcld-session-history_menu_box table#chatsession-table .wpbot_sessions_checkbox,
1251 +.qcld-session-history_menu_box table#chatsession-table #wpbot_checked_all {
1252 + width: 16px;
1253 + height: 16px;
1254 + accent-color: var(--woobot-primary-color);
1255 + cursor: pointer;
1256 +}
1257 +
1258 +/* Row action buttons */
1259 +.qcld-session-history_menu_box table#chatsession-table .btn {
1260 + display: inline-flex;
1261 + align-items: center;
1262 + justify-content: center;
1263 + gap: 4px;
1264 + margin: 2px 2px 2px 0;
1265 + padding: 7px 10px;
1266 + border-radius: 8px;
1267 + font-size: 12px;
1268 + font-weight: 600;
1269 + line-height: 1.2;
1270 + border: none;
1271 + cursor: pointer;
1272 + text-decoration: none;
1273 + transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
1274 +}
1275 +
1276 +.qcld-session-history_menu_box table#chatsession-table a.btn.btn-danger,
1277 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-danger {
1278 + background: var(--woobot-danger);
1279 + color: #fff;
1280 +}
1281 +
1282 +.qcld-session-history_menu_box table#chatsession-table a.btn.btn-danger:hover,
1283 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-danger:hover {
1284 + background: #c93f4d;
1285 + color: #fff;
1286 +}
1287 +
1288 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-secondary {
1289 + background: #fff;
1290 + color: var(--woobot-primary-color);
1291 + border: 1px solid var(--woobot-primary-border);
1292 +}
1293 +
1294 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-secondary:hover {
1295 + background: var(--woobot-primary-soft);
1296 + border-color: var(--woobot-primary-color);
1297 + color: var(--woobot-primary-dark);
1298 +}
1299 +
1300 +.qcld-session-history_menu_box table#chatsession-table a.btn.btn-info,
1301 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-info,
1302 +.qcld-session-history_menu_box table#chatsession-table span.btn.btn-info {
1303 + background: var(--woobot-primary-color);
1304 + color: #fff;
1305 +}
1306 +
1307 +.qcld-session-history_menu_box table#chatsession-table a.btn.btn-info:hover,
1308 +.qcld-session-history_menu_box table#chatsession-table .btn.btn-info:hover,
1309 +.qcld-session-history_menu_box table#chatsession-table span.btn.btn-info:hover {
1310 + background: var(--woobot-primary-dark);
1311 + color: #fff;
1312 +}
1313 +
1314 +/* DataTables bottom pagination */
1315 +.qcld-session-history_menu_box div.dt-container .dt-paging {
1316 + display: flex;
1317 + justify-content: flex-end;
1318 + margin-top: 8px;
1319 +}
1320 +
1321 +.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button {
1322 + display: inline-flex;
1323 + align-items: center;
1324 + justify-content: center;
1325 + min-width: 34px;
1326 + height: 34px;
1327 + margin: 0 2px;
1328 + padding: 0 10px;
1329 + border-radius: 8px !important;
1330 + border: 1px solid var(--woobot-primary-border) !important;
1331 + background: #fff !important;
1332 + color: var(--woobot-primary-color) !important;
1333 + font-size: 13px;
1334 + font-weight: 600;
1335 + box-shadow: none !important;
1336 + cursor: pointer;
1337 + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1338 +}
1339 +
1340 +.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
1341 + background: var(--woobot-primary-soft) !important;
1342 + border-color: var(--woobot-primary-color) !important;
1343 + color: var(--woobot-primary-dark) !important;
1344 +}
1345 +
1346 +.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button.current {
1347 + background: var(--woobot-primary-color) !important;
1348 + border-color: var(--woobot-primary-color) !important;
1349 + color: #fff !important;
1350 +}
1351 +
1352 +.qcld-session-history_menu_box div.dt-container .dt-paging .dt-paging-button.disabled {
1353 + opacity: 0.45;
1354 + cursor: default;
1355 +}
1356 +
1357 +@media screen and (max-width: 782px) {
1358 + .qcld-session-email-notice {
1359 + padding: 12px 14px;
1360 + }
1361 +
1362 + .qcld-session-history_menu_box div.dt-container input.dt-input {
1363 + min-width: 140px;
1364 + }
1365 +
1366 + .qcld-session-history_menu_box table#chatsession-table .btn {
1367 + width: 100%;
1368 + margin: 3px 0;
1369 + }
1370 +}
1371 +
1372 +.chatsession_table_area .col-md-6{
1373 + padding-left: 0 !important;
1374 +}
1375 +
1376 +.dt-layout-cell.dt-layout-full table#chatsession-table input[type=checkbox]:checked::before {
1377 + margin: 0;
1378 +}
1379 +
1380 +/* ─── Session details page ────────────────────────────────────────────────── */
1381 +.wpbot-session-details-page {
1382 + --woobot-primary: #5B4E96;
1383 + --woobot-primary-dark: #463a7a;
1384 + --woobot-primary-soft: #f3f1fa;
1385 + --woobot-primary-border: #e4e0f2;
1386 + --woobot-text: #2d2a3a;
1387 + --woobot-muted: #6b6680;
1388 + --woobot-danger: #e25563;
1389 + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1390 + margin: 12px 20px 40px 0;
1391 + padding-bottom: 0px;
1392 + color: var(--woobot-text);
1393 + max-width: 1280px;
1394 + margin: 0 auto;
1395 +}
1396 +
1397 +.wpbot-session-details-page .wpbot-session-meta-card,
1398 +.wpbot-session-details-page .wpbot-session-chat-card {
1399 + background: #fff;
1400 + border: 1px solid var(--woobot-primary-border);
1401 + border-radius: 16px;
1402 + box-shadow: 0 6px 22px rgba(var(--woobot-primary-rgb), 0.06);
1403 + width: 100%;
1404 + box-sizing: border-box;
1405 +}
1406 +
1407 +.wpbot-session-details-page .wpbot-session-meta-card {
1408 + padding: 22px 24px;
1409 + margin: 20px 0 20px;
1410 +}
1411 +
1412 +.wpbot-session-details-page .wpbot-session-meta-card__header {
1413 + display: flex;
1414 + align-items: center;
1415 + justify-content: space-between;
1416 + flex-wrap: wrap;
1417 + gap: 14px;
1418 + margin-bottom: 18px;
1419 + padding-bottom: 16px;
1420 + border-bottom: 1px solid var(--woobot-primary-soft);
1421 +}
1422 +ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
1423 + padding-right: 0 !important;
1424 +}
1425 +.wpbot-session-details-page .wpbot-session-meta-card__header h2 {
1426 + margin: 0 !important;
1427 + padding: 0 !important;
1428 + font-size: 22px;
1429 + font-weight: 700;
1430 + color: var(--woobot-primary) !important;
1431 + line-height: 1.3;
1432 +}
1433 +
1434 +.wpbot-session-details-page .wpbot-session-meta-card__actions {
1435 + display: flex;
1436 + flex-wrap: wrap;
1437 + gap: 10px;
1438 +}
1439 +
1440 +.wpbot-session-details-page .wpbot-session-meta-grid {
1441 + display: grid;
1442 + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1443 + gap: 14px;
1444 +}
1445 +
1446 +.wpbot-session-details-page .wpbot-session-meta-item {
1447 + background: var(--woobot-primary-soft);
1448 + border: 1px solid var(--woobot-primary-border);
1449 + border-radius: 12px;
1450 + padding: 14px 16px;
1451 +}
1452 +
1453 +.wpbot-session-details-page .wpbot-session-meta-item__label {
1454 + display: block;
1455 + font-size: 12px;
1456 + font-weight: 600;
1457 + letter-spacing: 0.03em;
1458 + text-transform: uppercase;
1459 + color: var(--woobot-muted);
1460 + margin-bottom: 6px;
1461 +}
1462 +
1463 +.wpbot-session-details-page .wpbot-session-meta-item__value {
1464 + display: block;
1465 + font-size: 15px;
1466 + font-weight: 600;
1467 + color: var(--woobot-text);
1468 + word-break: break-word;
1469 +}
1470 +
1471 +.wpbot-session-details-page .btn {
1472 + display: inline-flex;
1473 + align-items: center;
1474 + justify-content: center;
1475 + gap: 6px;
1476 + border-radius: 8px !important;
1477 + font-size: 13px !important;
1478 + font-weight: 600 !important;
1479 + line-height: 1.2 !important;
1480 + padding: 9px 16px !important;
1481 + text-decoration: none !important;
1482 + border-width: 2px !important;
1483 + transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
1484 +}
1485 +
1486 +.wpbot-session-details-page .btn.btn-primary,
1487 +.wpbot-session-details-page .wpbot-session-back-btn.btn-primary {
1488 + background: var(--woobot-primary) !important;
1489 + border-color: var(--woobot-primary) !important;
1490 + color: #fff !important;
1491 +}
1492 +
1493 +.wpbot-session-details-page .btn.btn-primary:hover,
1494 +.wpbot-session-details-page .wpbot-session-back-btn.btn-primary:hover {
1495 + background: var(--woobot-primary-dark) !important;
1496 + border-color: var(--woobot-primary-dark) !important;
1497 + color: #fff !important;
1498 +}
1499 +
1500 +.wpbot-session-details-page .btn.btn-secondary {
1501 + background: #fff !important;
1502 + border-color: var(--woobot-primary) !important;
1503 + color: var(--woobot-primary) !important;
1504 +}
1505 +
1506 +.wpbot-session-details-page .btn.btn-secondary:hover {
1507 + background: var(--woobot-primary) !important;
1508 + color: #fff !important;
1509 +}
1510 +
1511 +.wpbot-session-details-page .btn.btn-danger {
1512 + background: #fff !important;
1513 + border: 2px solid var(--woobot-danger) !important;
1514 + color: var(--woobot-danger) !important;
1515 +}
1516 +
1517 +.wpbot-session-details-page .btn.btn-danger:hover {
1518 + background: var(--woobot-danger) !important;
1519 + color: #fff !important;
1520 +}
1521 +
1522 +.wpbot-session-details-page .wpbot-session-chat-card {
1523 + padding: 0;
1524 + margin: 0 0 20px;
1525 + overflow: hidden;
1526 +}
1527 +
1528 +.wpbot-session-details-page .wpbot-session-chat-card__header {
1529 + display: flex;
1530 + align-items: center;
1531 + justify-content: space-between;
1532 + flex-wrap: wrap;
1533 + gap: 12px;
1534 + padding: 18px 22px;
1535 + border-bottom: 1px solid var(--woobot-primary-border);
1536 + background: #fff;
1537 +}
1538 +
1539 +.wpbot-session-details-page .wpbot-session-chat-card__header h3 {
1540 + margin: 0 !important;
1541 + padding: 0 !important;
1542 + font-size: 18px;
1543 + font-weight: 700;
1544 + color: var(--woobot-primary) !important;
1545 +}
1546 +
1547 +.wpbot-session-details-page .wpbot-session-chat-card__header .wpbot-session-back-btn {
1548 + margin: 0;
1549 +}
1550 +
1551 +.wpbot-session-details-page .wp-chatbot-messages-wrapper {
1552 + padding: 18px 22px 24px;
1553 + background: #faf9fd;
1554 +}
1555 +
1556 +.wpbot-session-details-page .wp-chatbot-messages-wrapper ul {
1557 + margin: 0;
1558 + padding: 0;
1559 + list-style: none;
1560 +}
1561 +
1562 +.wpbot-session-details-page li.session_start_url {
1563 + background: var(--woobot-primary) !important;
1564 + padding: 12px 16px !important;
1565 + margin: 0 0 18px !important;
1566 + color: #fff !important;
1567 + border-radius: 10px !important;
1568 + font-size: 13px !important;
1569 + font-weight: 500;
1570 +}
1571 +
1572 +.wpbot-session-details-page li.session_start_url a {
1573 + color: #fff !important;
1574 + text-decoration: underline;
1575 + word-break: break-all;
1576 +}
1577 +
1578 +.wpbot-session-details-page .wp-chatbot-paragraph {
1579 + background: #fff !important;
1580 + border: 1px solid var(--woobot-primary-border);
1581 + padding: 10px 14px !important;
1582 + border-radius: 12px !important;
1583 + box-shadow: 0 1px 3px rgba(var(--woobot-primary-rgb), 0.06);
1584 + text-align: left !important;
1585 +}
1586 +
1587 +.wpbot-session-details-page li.wp-chat-user-msg .wp-chatbot-paragraph {
1588 + background: var(--woobot-primary-soft) !important;
1589 + border-color: #ddd6f3;
1590 +}
1591 +
1592 +.wpbot-session-details-page .wp-chatbot-avatar img {
1593 + width: 36px !important;
1594 + height: 36px !important;
1595 + border-radius: 50%;
1596 + border: 2px solid var(--woobot-primary-border);
1597 +}
1598 +
1599 +.wpbot-session-details-page .forward-session-wrapper-detailspage {
1600 + display: none;
1601 +}
1602 +
1603 +.wpbot-session-details-page .wpbot-reply-fab {
1604 + position: fixed;
1605 + right: 28px;
1606 + bottom: 28px;
1607 + z-index: 10060;
1608 + display: inline-flex;
1609 + align-items: center;
1610 + gap: 10px;
1611 + padding: 14px 20px;
1612 + border: none;
1613 + border-radius: 999px;
1614 + background: var(--woobot-primary);
1615 + color: #fff;
1616 + font-size: 14px;
1617 + font-weight: 600;
1618 + font-family: inherit;
1619 + box-shadow: 0 10px 28px rgba(var(--woobot-primary-rgb), 0.35);
1620 + cursor: pointer;
1621 + transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
1622 +}
1623 +
1624 +.wpbot-session-details-page .wpbot-reply-fab i {
1625 + font-size: 18px;
1626 + line-height: 1;
1627 +}
1628 +
1629 +.wpbot-session-details-page .wpbot-reply-fab:hover,
1630 +.wpbot-session-details-page .wpbot-reply-fab.is-active {
1631 + background: var(--woobot-primary-dark);
1632 + transform: translateY(-2px);
1633 + box-shadow: 0 12px 32px rgba(var(--woobot-primary-rgb), 0.4);
1634 +}
1635 +
1636 +.wpbot-session-details-page .wpbot-reply-panel {
1637 + position: fixed;
1638 + right: 28px;
1639 + bottom: 88px;
1640 + z-index: 10061;
1641 + width: min(720px, calc(100vw - 40px));
1642 + max-height: min(70vh, 720px);
1643 + overflow: hidden;
1644 + display: flex;
1645 + flex-direction: column;
1646 + background: #fff;
1647 + border: 1px solid var(--woobot-primary-border);
1648 + border-radius: 16px;
1649 + box-shadow: 0 16px 40px rgba(var(--woobot-primary-rgb), 0.2);
1650 + opacity: 0;
1651 + visibility: hidden;
1652 + transform: translateY(12px) scale(0.98);
1653 + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
1654 +}
1655 +
1656 +.wpbot-session-details-page .wpbot-reply-panel.is-open {
1657 + opacity: 1;
1658 + visibility: visible;
1659 + transform: translateY(0) scale(1);
1660 +}
1661 +
1662 +.wpbot-session-details-page .wpbot-reply-panel[hidden] {
1663 + display: none !important;
1664 +}
1665 +
1666 +.wpbot-session-details-page .wpbot-reply-panel.is-open[hidden] {
1667 + display: flex !important;
1668 +}
1669 +
1670 +.wpbot-session-details-page .wpbot-reply-panel__header {
1671 + display: flex;
1672 + align-items: center;
1673 + justify-content: space-between;
1674 + gap: 12px;
1675 + padding: 14px 16px;
1676 + border-bottom: 1px solid var(--woobot-primary-border);
1677 + background: var(--woobot-primary-soft);
1678 +}
1679 +
1680 +.wpbot-session-details-page .wpbot-reply-panel__header h4 {
1681 + margin: 0 !important;
1682 + font-size: 15px;
1683 + font-weight: 700;
1684 + color: var(--woobot-primary);
1685 +}
1686 +
1687 +.wpbot-session-details-page .wpbot-reply-panel__close {
1688 + width: 30px;
1689 + height: 30px;
1690 + border: none;
1691 + border-radius: 50%;
1692 + background: var(--woobot-primary);
1693 + color: #fff;
1694 + font-size: 20px;
1695 + line-height: 28px;
1696 + cursor: pointer;
1697 + padding: 0;
1698 +}
1699 +
1700 +.wpbot-session-details-page .wpbot-reply-panel__close:hover {
1701 + background: var(--woobot-primary-dark);
1702 +}
1703 +
1704 +.wpbot-session-details-page .wpbot-reply-panel__body {
1705 + padding: 16px;
1706 + overflow-y: auto;
1707 +}
1708 +
1709 +.wpbot-session-details-page .wpbot-reply-panel__to {
1710 + margin: 0 0 12px;
1711 + font-size: 13px;
1712 + color: var(--woobot-text);
1713 +}
1714 +
1715 +.wpbot-session-details-page .wpbot-reply-panel__warning {
1716 + margin: 0 0 14px;
1717 + padding: 12px;
1718 + border-radius: 8px;
1719 + background: #fdebec;
1720 + color: var(--woobot-danger);
1721 + font-size: 13px;
1722 + font-weight: 600;
1723 +}
1724 +
1725 +.wpbot-session-details-page .email-reply-container {
1726 + background: var(--woobot-primary-soft);
1727 + border: 1px solid var(--woobot-primary-border);
1728 + border-radius: 12px;
1729 + padding: 14px;
1730 + margin-bottom: 14px;
1731 +}
1732 +
1733 +.wpbot-session-details-page .email-reply-container h4 {
1734 + margin: 0 0 14px !important;
1735 + font-size: 15px;
1736 + font-weight: 600;
1737 + color: var(--woobot-primary);
1738 +}
1739 +
1740 +.wpbot-session-details-page .email-reply-container .form-label {
1741 + font-size: 13px;
1742 + font-weight: 600;
1743 + color: var(--woobot-muted);
1744 + margin-bottom: 6px;
1745 +}
1746 +
1747 +.wpbot-session-details-page .email-reply-container .form-control,
1748 +.wpbot-session-details-page .forward-session-wrapper #details_session_email {
1749 + border: 1px solid var(--woobot-primary-border);
1750 + border-radius: 8px;
1751 + padding: 10px 12px;
1752 + font-size: 13px;
1753 + color: var(--woobot-text);
1754 + box-shadow: none;
1755 + outline: none;
1756 +}
1757 +
1758 +.wpbot-session-details-page .email-reply-container .form-control:focus,
1759 +.wpbot-session-details-page .forward-session-wrapper #details_session_email:focus {
1760 + border-color: var(--woobot-primary);
1761 + box-shadow: 0 0 0 3px rgba(var(--woobot-primary-rgb), 0.15);
1762 +}
1763 +
1764 +.wpbot-session-details-page .forward-session-wrapper {
1765 + display: flex;
1766 + align-items: stretch;
1767 + gap: 0;
1768 +}
1769 +
1770 +.wpbot-session-details-page .forward-session-wrapper #details_session_email {
1771 + flex: 1;
1772 + border-radius: 8px 0 0 8px !important;
1773 + min-height: 42px;
1774 +}
1775 +
1776 +.wpbot-session-details-page .forward-session-wrapper .forward_session {
1777 + min-width: 140px;
1778 + border-radius: 0 8px 8px 0 !important;
1779 + background: var(--woobot-primary) !important;
1780 + border-color: var(--woobot-primary) !important;
1781 + color: #fff !important;
1782 + cursor: pointer;
1783 +}
1784 +
1785 +.wpbot-session-details-page .forward-session-wrapper .forward_session:hover {
1786 + background: var(--woobot-primary-dark) !important;
1787 + border-color: var(--woobot-primary-dark) !important;
1788 +}
1789 +
1790 +@media screen and (max-width: 782px) {
1791 + .wpbot-session-details-page .wpbot-reply-fab {
1792 + right: 16px;
1793 + bottom: 16px;
1794 + padding: 12px 16px;
1795 + }
1796 +
1797 + .wpbot-session-details-page .wpbot-reply-panel {
1798 + right: 16px;
1799 + bottom: 76px;
1800 + width: calc(100vw - 32px);
1801 + }
1802 +
1803 + .wpbot-session-details-page .forward-session-wrapper {
1804 + flex-direction: column;
1805 + gap: 8px;
1806 + }
1807 +
1808 + .wpbot-session-details-page .forward-session-wrapper #details_session_email,
1809 + .wpbot-session-details-page .forward-session-wrapper .forward_session {
1810 + width: 100%;
1811 + border-radius: 8px !important;
1812 + min-width: 0;
1813 + }
1814 +}
1815 +
1816 +/* ─── AI Insight locked page ──────────────────────────────────────────────── */
1817 +.wpbot-ai-insight-page {
1818 + --woobot-primary: #5B4E96;
1819 + --woobot-primary-dark: #463a7a;
1820 + --woobot-primary-soft: #f3f1fa;
1821 + --woobot-primary-border: #e4e0f2;
1822 + --woobot-text: #2d2a3a;
1823 + --woobot-muted: #6b6680;
1824 + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1825 + max-width: 1280px;
1826 + margin: 20px auto 40px auto;
1827 +}
1828 +
1829 +.wpbot-ai-insight-page .wpbot-ai-insight-header {
1830 + background: #fff;
1831 + border: 1px solid var(--woobot-primary-border);
1832 + border-radius: 16px;
1833 + padding: 20px 24px;
1834 + margin: 0 0 20px;
1835 +}
1836 +
1837 +.wpbot-ai-insight-page .wpbot-ai-insight-header h2 {
1838 + margin: 0 0 4px !important;
1839 + padding: 0 !important;
1840 + font-size: 24px;
1841 + font-weight: 700;
1842 + color: var(--woobot-primary) !important;
1843 + line-height: 1.3;
1844 +}
1845 +
1846 +.wpbot-ai-insight-page .wpbot-ai-insight-header p {
1847 + margin: 0;
1848 + font-size: 14px;
1849 + color: var(--woobot-muted);
1850 +}
1851 +
1852 +.wpbot-ai-insight-page .wpbot-ai-insight-locked {
1853 + display: flex;
1854 + flex-direction: column;
1855 + align-items: center;
1856 + text-align: center;
1857 + background: #fff;
1858 + border: 1px solid var(--woobot-primary-border);
1859 + border-radius: 16px;
1860 + padding: 48px 36px;
1861 + box-shadow: 0 8px 28px rgba(var(--woobot-primary-rgb), 0.08);
1862 +}
1863 +
1864 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__icon {
1865 + display: flex;
1866 + align-items: center;
1867 + justify-content: center;
1868 + width: 72px;
1869 + height: 72px;
1870 + margin-bottom: 18px;
1871 + border-radius: 50%;
1872 + background: var(--woobot-primary-soft);
1873 + border: 1px solid var(--woobot-primary-border);
1874 +}
1875 +
1876 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__icon .dashicons {
1877 + width: 36px;
1878 + height: 36px;
1879 + font-size: 36px;
1880 + color: var(--woobot-primary);
1881 +}
1882 +
1883 +.wpbot-ai-insight-page .wpbot-ai-insight-locked h3 {
1884 + margin: 0 0 12px !important;
1885 + padding: 0 !important;
1886 + font-size: 22px;
1887 + font-weight: 700;
1888 + color: var(--woobot-primary) !important;
1889 + line-height: 1.3;
1890 +}
1891 +
1892 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__desc {
1893 + max-width: 560px;
1894 + margin: 0 0 14px;
1895 + font-size: 15px;
1896 + line-height: 1.6;
1897 + color: var(--woobot-text);
1898 +}
1899 +
1900 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__cta {
1901 + margin: 0 0 24px;
1902 + font-size: 15px;
1903 + font-weight: 700;
1904 + color: var(--woobot-primary-dark);
1905 +}
1906 +
1907 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__btn {
1908 + display: inline-flex;
1909 + align-items: center;
1910 + justify-content: center;
1911 + padding: 12px 28px;
1912 + border-radius: 8px;
1913 + background: var(--woobot-primary);
1914 + border: 2px solid var(--woobot-primary);
1915 + color: #fff !important;
1916 + font-size: 15px;
1917 + font-weight: 600;
1918 + text-decoration: none !important;
1919 + line-height: 1.2;
1920 + transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
1921 +}
1922 +
1923 +.wpbot-ai-insight-page .wpbot-ai-insight-locked__btn:hover {
1924 + background: var(--woobot-primary-dark);
1925 + border-color: var(--woobot-primary-dark);
1926 + color: #fff !important;
1927 + transform: translateY(-1px);
1928 +}
1929 +
1930 +.qchero_sliders_list_wrapper.qcld-session-history_menu_box {
1931 + max-width: 1280px;
1932 + margin: 20px auto 40px auto;
1933 +}
1934 +
1935 +table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date {
1936 + text-align: left;
1937 +}
1938 +
1939 +.sld_menu_title.qcld_session_chat_menu_title {
1940 + width: 100%;
1941 + max-width: 1280px;
1942 + margin: 20px auto 20px auto;
1943 +}
1944 +.qcld-session-no-record-found {
1945 + width: 100%;
1946 + max-width: 1280px;
1947 + margin: 0 auto;
1948 +}
1949 +
1950 +/* Sessions page shell — match other WPBot admin pages */
1951 +body.chatbot-wpbot-lite_page_wbcs-botsessions-page,
1952 +body.wpbot-panel_page_wbcs-botsessions-page {
1953 + background-color: var(--woobot-page-bg);
1954 +}
1955 +
1956 +.qcld-chat-sessions-wrap {
1957 + font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
1958 +}
1959 +
1960 +.qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header,
1961 +.qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header_inn,
1962 +.qcld-chat-sessions-wrap .qchero_sliders_list_wrapper.qcld-session-history_menu_box,
1963 +.qcld-chat-sessions-wrap .sld_menu_title.qcld_session_chat_menu_title,
1964 +.qcld-chat-sessions-wrap .qcld-session-no-record-found,
1965 +.qcld-chat-sessions-wrap .wpbot-ai-insight-page {
1966 + max-width: 1280px;
1967 + width: 100%;
1968 + box-sizing: border-box;
1969 + margin-left: auto;
1970 + margin-right: auto;
1971 +}
1972 +
1973 +.qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header_inn {
1974 + background: #fff;
1975 + border-radius: 16px;
1976 + padding: 20px;
1977 +}
1978 +
1979 +.qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header_inn_heading h1.wp-heading-inline {
1980 + display: block;
1981 + border-bottom: 1px solid #eee;
1982 + padding: 0 0 15px 0;
1983 + margin: 0 0 16px 0;
1984 + font-weight: 700;
1985 + font-size: 22px !important;
1986 + color: var(--woobot-primary) !important;
1987 + line-height: 1.3;
1988 +}
1989 +
1990 +.qcld-chat-sessions-wrap .qcld-chat-sessions-tabs {
1991 + display: flex;
1992 + flex-wrap: wrap;
1993 + gap: 10px;
1994 + border: none;
1995 + padding: 0;
1996 + margin: 0;
1997 +}
1998 +
1999 +.qcld-chat-sessions-wrap .qcld-chat-sessions-tabs .nav-tab {
2000 + display: inline-flex;
2001 + align-items: center;
2002 + gap: 8px;
2003 + float: none;
2004 + margin: 0;
2005 +}
2006 +
2007 +.qcld-chat-sessions-wrap .qcld-chat-sessions-tabs .nav-tab .dashicons {
2008 + font-size: 18px;
2009 + width: 18px;
2010 + height: 18px;
2011 + line-height: 18px;
2012 +}
2013 +
2014 +.qcld-chat-sessions-wrap .qcld-chat-sessions-tabs .nav-tab:hover,
2015 +.qcld-chat-sessions-wrap .qcld-chat-sessions-tabs .nav-tab:focus {
2016 + background: var(--woobot-primary);
2017 + color: #fff;
2018 + border-color: var(--woobot-primary);
2019 + box-shadow: none;
2020 + outline: none;
2021 +}
2022 +
2023 +.qcld-chat-sessions-tab-content {
2024 + margin-top: 0;
2025 +}
2026 +
2027 +.qcld-chat-sessions-wrap .wpbot-ai-insight-page {
2028 + max-width: 1280px;
2029 + margin: 20px auto 40px auto;
2030 +}
2031 +
2032 +.qcld-chat-sessions-wrap form#wpcs_form_sessions {
2033 + width: 100% !important;
2034 +}
2035 +
2036 +@media screen and (max-width: 782px) {
2037 + .wpbot-ai-insight-page {
2038 + margin: 12px 0 24px;
2039 + }
2040 +
2041 + .wpbot-ai-insight-page .wpbot-ai-insight-locked {
2042 + padding: 36px 20px;
2043 + border-radius: 12px;
2044 + }
2045 +
2046 + .qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header,
2047 + .qcld-chat-sessions-wrap .qcld-wp-chatbot-wrap-header_inn,
2048 + .qcld-chat-sessions-wrap .qchero_sliders_list_wrapper.qcld-session-history_menu_box,
2049 + .qcld-chat-sessions-wrap .sld_menu_title.qcld_session_chat_menu_title,
2050 + .qcld-chat-sessions-wrap .wpbot-ai-insight-page {
2051 + margin-right: 0;
2052 + }
1940 2053 }