PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.8.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.8.2
8.8.2 8.8.1 8.8.0 8.7.9 8.7.8 8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 All 538 releases
← All changes | includes/chat-sessions/css/history-style.css +2052 -2052 8.7.9 → 8.8.2 View file →
@@ -1,2053 +1,2053 @@
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 - }
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 2053 }