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
chatbot / includes / chat-sessions / css / history-style.css

history-style.css in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 8.8.0, at includes/chat-sessions/css/history-style.css

2,053 lines 52.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
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 }
2053 }