PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.7.7
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.7.7
8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 All 533 releases
← All changes | css/admin-style.css +800 -148 8.6.58.7.7 View file →
@@ -1,8 +1,36 @@
1 1 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
2 2
3 +/* WPBot design tokens — change colors here to theme the whole admin UI */
4 +:root {
5 + --woobot-primary: #5B4E96;
6 + --woobot-primary-color: #5B4E96;
7 + --woobot-primary-dark: #463a7a;
8 + --woobot-primary-soft: #f3f1fa;
9 + --woobot-primary-border: #e4e0f2;
10 + --woobot-surface: #ffffff;
11 + --woobot-page-bg: #F5F7FD;
12 + --woobot-text: #2d2a3a;
13 + --woobot-muted: #6b6680;
14 + --woobot-danger: #e25563;
15 + --woobot-nav-muted: #988FBD;
16 + --woobot-primary-rgb: 91, 78, 150;
17 +}
18 +
3 19 .qcld-main-wrapper {
4 - background-color: #F5F7FD;
20 + --woobot-primary: #5B4E96;
21 + --woobot-primary-color: #5B4E96;
22 + --woobot-primary-dark: #463a7a;
23 + --woobot-primary-soft: #f3f1fa;
24 + --woobot-primary-border: #e4e0f2;
25 + --woobot-surface: #ffffff;
26 + --woobot-page-bg: #F5F7FD;
27 + --woobot-text: #2d2a3a;
28 + --woobot-muted: #6b6680;
29 + --woobot-danger: #e25563;
30 + --woobot-nav-muted: #988FBD;
31 + --woobot-primary-rgb: 91, 78, 150;
32 + background-color: var(--woobot-page-bg);
5 33 font-family: "DM Sans", sans-serif !important;
6 34 font-optical-sizing: auto;
7 35 font-size: 16px;
8 36 font-weight: normal;
@@ -12,9 +40,9 @@
12 40 font: normal normal normal 14px / 1 FontAwesome !important;
13 41 }
14 42
15 43 /* .chatbot-wpbot-lite_page_wpbot, .chatbot-wpbot-lite_page_wpbot_help_page, .chatbot-wpbot-lite_page_wpbot_openAi, .toplevel_page_wpbot-panel{
16 - background-color: #F5F7FD;
44 + background-color: var(--woobot-page-bg);
17 45 } */
18 46
19 47 .qcld-main-wrapper .h1,
20 48 .qcld-main-wrapper .h2,
@@ -27,9 +55,9 @@
27 55 .qcld-main-wrapper h3,
28 56 .qcld-main-wrapper h4,
29 57 .qcld-main-wrapper h5,
30 58 .qcld-main-wrapper h6 {
31 - color: #5b4e96 !important;
59 + color: var(--woobot-primary) !important;
32 60 }
33 61
34 62 .qcld-wp-chatbot-wrap-header {
35 63 display: flex;
@@ -56,10 +84,10 @@
56 84
57 85 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
58 86 padding: 12px 25px;
59 87 background: #ffffff;
60 - color: #5B4E96;
61 - border: 2px solid #5B4E96;
88 + color: var(--woobot-primary);
89 + border: 2px solid var(--woobot-primary);
62 90 border-radius: 6px;
63 91 font-weight: bold;
64 92 }
65 93
@@ -64,11 +92,11 @@
64 92 }
65 93
66 94 .qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade:hover {
67 95 padding: 12px 25px;
68 - background: #5B4E96;
96 + background: var(--woobot-primary);
69 97 color: #fff;
70 - border: 2px solid #5B4E96;
98 + border: 2px solid var(--woobot-primary);
71 99 border-radius: 6px;
72 100 font-weight: bold;
73 101 text-decoration: none;
74 102 }
@@ -103,15 +131,15 @@
103 131 }
104 132
105 133
106 134 .wp-chatbot-tabs nav ul li.tab-current a {
107 - background: #5B4E96;
135 + background: var(--woobot-primary);
108 136 color: #ffffff;
109 137 text-decoration: none;
110 138 }
111 139
112 140 .wp-chatbot-tabs nav ul li a:hover {
113 - background: #5B4E96;
141 + background: var(--woobot-primary);
114 142 color: #ffffff;
115 143 text-decoration: none;
116 144 }
117 145
@@ -119,9 +147,9 @@
119 147 padding: 14px 15px;
120 148 width: 100%;
121 149 font-size: 16px;
122 150 font-weight: 500;
123 - color: #988FBD;
151 + color: var(--woobot-nav-muted);
124 152 border-radius: 8px;
125 153 position: relative;
126 154 display: flex;
127 155 align-items: center;
@@ -145,9 +173,9 @@
145 173 padding: 14px 15px;
146 174 width: 100%;
147 175 font-size: 16px;
148 176 font-weight: 500;
149 - color: #988FBD;
177 + color: var(--woobot-nav-muted);
150 178 border-radius: 8px;
151 179 position: relative;
152 180 display: flex;
153 181 align-items: center;
@@ -167,9 +195,9 @@
167 195 font-size: 18px;
168 196 }
169 197
170 198 .wp-chatbot-tabs nav .cxsc-settings_openai_border a:hover {
171 - background: #5B4E96;
199 + background: var(--woobot-primary);
172 200 color: #ffffff;
173 201 text-decoration: none;
174 202 }
175 203
@@ -202,9 +230,9 @@
202 230 max-width: 18px;
203 231 }
204 232
205 233 a.wp-chatbot-admin-pro-upgrade-button {
206 - background: #5B4E96;
234 + background: var(--woobot-primary);
207 235 color: #ffffff;
208 236 text-decoration: none;
209 237 padding: 4px 20px;
210 238 border-radius: 6px;
@@ -243,15 +271,15 @@
243 271 padding: 14px 20px;
244 272 width: auto;
245 273 font-size: 16px;
246 274 font-weight: 500;
247 - color: #988FBD;
275 + color: var(--woobot-nav-muted);
248 276 border-radius: 8px;
249 277 position: relative;
250 278 display: flex;
251 279 align-items: center;
252 280 gap: 15px;
253 - background: #5B4E96;
281 + background: var(--woobot-primary);
254 282 color: #ffffff;
255 283 text-decoration: none;
256 284 margin: 0 0 10px 15px;
257 285 }
@@ -280,12 +308,12 @@
280 308 font-size: 14px;
281 309 line-height: 1.71428571;
282 310 font-weight: 600;
283 311 background: #ffffff;
284 - color: #5b4e96;
312 + color: var(--woobot-primary);
285 313 text-decoration: none;
286 314 white-space: nowrap;
287 - border: 1px solid #5b4e96;
315 + border: 1px solid var(--woobot-primary);
288 316 padding: 10px 20px !important;
289 317 border-radius: 8px;
290 318 line-height: normal !important;
291 319 text-decoration: none;
@@ -294,16 +322,16 @@
294 322 .qcld-main-wrapper .nav-tab-active,
295 323 .qcld-main-wrapper .nav-tab-active:focus,
296 324 .qcld-main-wrapper .nav-tab-active:focus:active,
297 325 .qcld-main-wrapper .nav-tab-active:hover {
298 - border-bottom: 1px solid #5b4e96;
299 - background: #5b4e96;
326 + border-bottom: 1px solid var(--woobot-primary);
327 + background: var(--woobot-primary);
300 328 color: #fff;
301 329 text-decoration: none;
302 330 }
303 331
304 332 .qcld-main-wrapper .btn-primary {
305 - border-color: #5b4e96 !important;
333 + border-color: var(--woobot-primary) !important;
306 334 }
307 335
308 336 .qcld-main-wrapper ul.feature-list li img {
309 337 max-width: 16px;
@@ -322,12 +350,12 @@
322 350
323 351
324 352 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading {
325 353 background: #fff !important;
326 - color: #5B4E96 !important;
354 + color: var(--woobot-primary) !important;
327 355 text-decoration: none !important;
328 356 border-radius: 8px;
329 - border: 2px solid #5B4E96;
357 + border: 2px solid var(--woobot-primary);
330 358 }
331 359
332 360 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading+.panel-collapse>.panel-body {
333 361 border-top-color: #ddd;
@@ -337,9 +365,9 @@
337 365 margin: 15px 0 0 0;
338 366 }
339 367
340 368 section.wp-chatbot-tab-container-inner .panel-default>.panel-heading:hover {
341 - background: #5B4E96 !important;
369 + background: var(--woobot-primary) !important;
342 370 color: #ffffff !important;
343 371 text-decoration: none !important;
344 372 border-radius: 8px;
345 373 }
@@ -424,14 +452,14 @@
424 452
425 453 .wp-chatbot-wrap .nav-tabs>li>a {
426 454 margin-right: .5em;
427 455 line-height: 1.42857143;
428 - border: 1px solid #5b4e96;
456 + border: 1px solid var(--woobot-primary);
429 457 border-radius: 6px;
430 - border: 1px solid #5b4e96;
458 + border: 1px solid var(--woobot-primary);
431 459 padding: 10px 20px !important;
432 460 border-radius: 8px;
433 - color: #5b4e96;
461 + color: var(--woobot-primary);
434 462 font-size: 15px;
435 463 font-weight: 600;
436 464 line-height: normal !important;
437 465 }
@@ -440,10 +468,10 @@
440 468 .wp-chatbot-wrap .nav-tabs>li.active>a:focus,
441 469 .wp-chatbot-wrap .nav-tabs>li.active>a:hover {
442 470 color: #ffffff;
443 471 cursor: default;
444 - background-color: #5b4e96;
445 - border: 1px solid #5b4e96;
472 + background-color: var(--woobot-primary);
473 + border: 1px solid var(--woobot-primary);
446 474 border-bottom-color: transparent;
447 475 }
448 476
449 477 .wp-chatbot-wrap .nav-tabs {
@@ -453,22 +481,22 @@
453 481
454 482 .wp-chatbot-wrap .nav>li>a:focus,
455 483 .wp-chatbot-wrap .nav>li>a:hover {
456 484 text-decoration: none;
457 - background-color: #5b4e96;
458 - border-color: #5b4e96 #eee #ddd;
485 + background-color: var(--woobot-primary);
486 + border-color: var(--woobot-primary) #eee #ddd;
459 487 color: #fff;
460 488 }
461 489
462 490
463 491 .cxsc-settings-blocks.cxsc-settings-faq-blocks {
464 - background: #f5f7fd !important;
492 + background: var(--woobot-page-bg) !important;
465 493 padding: 12px !important;
466 494 border-radius: 6px;
467 495 }
468 496
469 497 .qcld-faq-block .cxsc-settings-blocks {
470 - background: #f5f7fd !important;
498 + background: var(--woobot-page-bg) !important;
471 499 padding: 12px !important;
472 500 border-radius: 6px !important;
473 501 margin: 0 0 15px 0 !important;
474 502 }
@@ -505,9 +533,9 @@
505 533 border-radius: 0;
506 534 width: 100%;
507 535 height: 100%;
508 536 margin: 0;
509 - background-color: #5b4e96bd !important;
537 + background-color: color-mix(in srgb, var(--woobot-primary) 74%, transparent) !important;
510 538 line-height: 1.14285714;
511 539 position: absolute;
512 540 top: 0;
513 541 left: 0;
@@ -616,12 +644,12 @@
616 644 object-fit: cover;
617 645 }
618 646
619 647 .wpbot_single_addon a.button.button-secondary {
620 - background: #5B4E96;
648 + background: var(--woobot-primary);
621 649 color: #ffffff;
622 650 text-decoration: none;
623 - border: 1px solid #5B4E96;
651 + border: 1px solid var(--woobot-primary);
624 652 }
625 653
626 654 .wp-chatbot-wrap .wpbot_single_addon p {
627 655 font-size: 14px;
@@ -707,11 +735,11 @@
707 735 }
708 736
709 737
710 738 .qcld-wp-chatbot-wrap-header-doc-details a {
711 - border: 2px solid #5b4e96;
739 + border: 2px solid var(--woobot-primary);
712 740 background: #fff;
713 - color: #5b4e96;
741 + color: var(--woobot-primary);
714 742 padding: 8px 20px;
715 743 border-radius: 8px;
716 744 display: inline-block;
717 745 margin: 4px 0 0 0;
@@ -717,10 +745,10 @@
717 745 margin: 4px 0 0 0;
718 746 }
719 747
720 748 .qcld-wp-chatbot-wrap-header-doc-details a:hover {
721 - border: 2px solid #5b4e96;
722 - background: #5b4e96;
749 + border: 2px solid var(--woobot-primary);
750 + background: var(--woobot-primary);
723 751 color: #fff;
724 752 padding: 8px 20px;
725 753 border-radius: 8px;
726 754 display: inline-block;
@@ -761,9 +789,9 @@
761 789 display: block;
762 790 display: flex !important;
763 791 align-items: center;
764 792 gap: 8px;
765 - background: #5B4E96;
793 + background: var(--woobot-primary);
766 794 padding: 10px 25px !important;
767 795 border-radius: 8px;
768 796 width: 100%;
769 797 justify-content: center;
@@ -807,15 +835,15 @@
807 835 padding: 14px 20px;
808 836 width: auto;
809 837 font-size: 16px;
810 838 font-weight: 500;
811 - color: #988FBD;
839 + color: var(--woobot-nav-muted);
812 840 border-radius: 8px;
813 841 position: relative;
814 842 display: inline-block;
815 843 align-items: center;
816 844 gap: 15px;
817 - background: #5B4E96;
845 + background: var(--woobot-primary);
818 846 color: #ffffff;
819 847 text-decoration: none;
820 848 }
821 849
@@ -944,9 +972,9 @@
944 972 padding: 12px;
945 973 }
946 974
947 975 .qc_menu_area_box ul li span {
948 - background-image: linear-gradient(to right, #868afa 0%, #5b4e96 51%, #5b4e96 100%);
976 + background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
949 977 box-shadow: 0 5px 15px #c3c3c3;
950 978 border: 1px solid #ffffff;
951 979 color: #fff;
952 980 display: block;
@@ -954,9 +982,9 @@
954 982 padding: 12px 30px;
955 983 }
956 984
957 985 .qc_menu_area_box .qc_menu_area_container span {
958 - background-image: linear-gradient(to right, #868afa 0%, #5b4e96 51%, #5b4e96 100%);
986 + background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
959 987 box-shadow: 0 5px 15px #c3c3c3;
960 988 border: 1px solid #ffffff;
961 989 color: #fff;
962 990 display: block;
@@ -965,9 +993,9 @@
965 993 }
966 994
967 995 .qc_menu_area_box .qc_menu_area_container span:hover,
968 996 .qc_menu_area_box ul li span:hover {
969 - background-image: linear-gradient(to right, #5b4e96 0%, #868afa 51%, #868afa 100%);
997 + background-image: linear-gradient(to right, var(--woobot-primary) 0%, #868afa 51%, #868afa 100%);
970 998 }
971 999
972 1000 .qc_menu_list_container {
973 1001 position: relative;
@@ -996,8 +1024,59 @@
996 1024 .lp-submenu-wpbot_openAi .swal2-actions {
997 1025 display: flex;
998 1026 width: auto;
999 1027 }
1028 +
1029 +/* Icon-only centered loading overlay for Save settings */
1030 +.swal2-popup.qcld-swal-loading-only {
1031 + background: transparent !important;
1032 + box-shadow: none !important;
1033 + padding: 0 !important;
1034 + width: auto !important;
1035 + min-width: 0 !important;
1036 +}
1037 +.swal2-popup.qcld-swal-loading-only .swal2-header,
1038 +.swal2-popup.qcld-swal-loading-only .swal2-title,
1039 +.swal2-popup.qcld-swal-loading-only .swal2-actions,
1040 +.swal2-popup.qcld-swal-loading-only .swal2-footer,
1041 +.swal2-popup.qcld-swal-loading-only .swal2-close {
1042 + display: none !important;
1043 +}
1044 +.swal2-popup.qcld-swal-loading-only .swal2-html-container {
1045 + margin: 0 !important;
1046 + padding: 0 !important;
1047 + overflow: visible !important;
1048 + color: transparent !important;
1049 +}
1050 +.qcld-save-settings-spinner {
1051 + position: relative;
1052 + width: 56px;
1053 + height: 56px;
1054 + margin: 0 auto;
1055 +}
1056 +.qcld-save-settings-spinner::before,
1057 +.qcld-save-settings-spinner::after {
1058 + content: '';
1059 + position: absolute;
1060 + inset: 0;
1061 + border-radius: 50%;
1062 + border: 4px solid transparent;
1063 +}
1064 +.qcld-save-settings-spinner::before {
1065 + border-top-color: #8b5cf6;
1066 + border-right-color: #8b5cf6;
1067 + animation: qcld-save-settings-spin 0.9s linear infinite;
1068 +}
1069 +.qcld-save-settings-spinner::after {
1070 + inset: 8px;
1071 + border-bottom-color: #ffffff;
1072 + border-left-color: #ffffff;
1073 + animation: qcld-save-settings-spin 0.7s linear infinite reverse;
1074 +}
1075 +@keyframes qcld-save-settings-spin {
1076 + 0% { transform: rotate(0deg); }
1077 + 100% { transform: rotate(360deg); }
1078 +}
1000 1079 .lp-submenu-wpbot_openAi button.swal2-confirm.btn.btn-lg.swal2-styled{
1001 1080 width: auto !important;
1002 1081 }
1003 1082
@@ -1018,9 +1097,9 @@
1018 1097 .wp-chatbot-wrap .form-group input[type=checkbox]+label {
1019 1098 position: relative;
1020 1099 width: 18px;
1021 1100 height: 18px;
1022 - border: 2px solid #5b4e96;
1101 + border: 2px solid var(--woobot-primary);
1023 1102 border-radius: 4px;
1024 1103 top: 0;
1025 1104 left: 0;
1026 1105 transform: translate(0%, 0%);
@@ -1089,9 +1168,9 @@
1089 1168 padding: 0;
1090 1169 display: flex;
1091 1170 flex-direction: column;
1092 1171 align-content: flex-start;
1093 - border: 15px solid #f5f7fd;
1172 + border: 15px solid var(--woobot-page-bg);
1094 1173 border-radius: 16px;
1095 1174 min-height: 480px;
1096 1175 }
1097 1176
@@ -1132,12 +1211,12 @@
1132 1211 padding: 0;
1133 1212 border: none;
1134 1213 box-shadow: none;
1135 1214 background: #fff !important;
1136 - color: #5B4E96 !important;
1215 + color: var(--woobot-primary) !important;
1137 1216 text-decoration: none !important;
1138 1217 border-radius: 8px;
1139 - border: 2px solid #5B4E96;
1218 + border: 2px solid var(--woobot-primary);
1140 1219 }
1141 1220
1142 1221 .admin-maxwith.qcld-openai-main-box div#qcldopenaiaccordion .card h2 {
1143 1222 margin: 0;
@@ -1149,9 +1228,9 @@
1149 1228 font-weight: bold;
1150 1229 display: block;
1151 1230 padding: 15px 12px;
1152 1231 font-size: 16px;
1153 - color: #5B4E96;
1232 + color: var(--woobot-primary);
1154 1233 width: 100%;
1155 1234 text-align: left;
1156 1235 }
1157 1236
@@ -1208,9 +1287,9 @@
1208 1287 padding: 14px 20px;
1209 1288 width: 100%;
1210 1289 font-size: 16px;
1211 1290 font-weight: 500;
1212 - color: #988FBD;
1291 + color: var(--woobot-nav-muted);
1213 1292 border-radius: 8px;
1214 1293 position: relative;
1215 1294 display: flex;
1216 1295 align-items: center;
@@ -1226,15 +1305,15 @@
1226 1305 padding: 14px 20px;
1227 1306 width: 100%;
1228 1307 font-size: 16px;
1229 1308 font-weight: 500;
1230 - color: #988FBD;
1309 + color: var(--woobot-nav-muted);
1231 1310 border-radius: 8px;
1232 1311 position: relative;
1233 1312 display: flex;
1234 1313 align-items: center;
1235 1314 gap: 15px;
1236 - background: #5B4E96;
1315 + background: var(--woobot-primary);
1237 1316 color: #ffffff;
1238 1317 text-decoration: none;
1239 1318 border: none;
1240 1319 margin: 2px 0;
@@ -1245,9 +1324,9 @@
1245 1324 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]+label {
1246 1325 position: relative;
1247 1326 width: 18px;
1248 1327 height: 18px;
1249 - border: 2px solid #5b4e96;
1328 + border: 2px solid var(--woobot-primary);
1250 1329 border-radius: 4px;
1251 1330 top: 0;
1252 1331 left: 0;
1253 1332 transform: translate(0%, 0%);
@@ -1309,9 +1388,9 @@
1309 1388 .qcl-openai input[type=checkbox]+label {
1310 1389 position: relative;
1311 1390 width: 18px;
1312 1391 height: 18px;
1313 - border: 2px solid #5b4e96;
1392 + border: 2px solid var(--woobot-primary);
1314 1393 border-radius: 4px;
1315 1394 top: 0;
1316 1395 left: 0;
1317 1396 transform: translate(0%, 0%);
@@ -1372,9 +1451,9 @@
1372 1451 .qcl-openai label.form-check-label span.pro-badge {
1373 1452 font-size: 9px;
1374 1453 font-weight: 400;
1375 1454 color: #ffffff;
1376 - background: #5B4E96;
1455 + background: var(--woobot-primary);
1377 1456 border-radius: 20px;
1378 1457 padding: 2px 8px;
1379 1458 margin-left: 5px;
1380 1459 text-transform: uppercase;
@@ -1389,9 +1468,9 @@
1389 1468 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label {
1390 1469 position: relative;
1391 1470 width: 18px;
1392 1471 height: 18px;
1393 - border: 2px solid #5b4e96;
1472 + border: 2px solid var(--woobot-primary);
1394 1473 border-radius: 4px;
1395 1474 top: 0;
1396 1475 left: 0;
1397 1476 transform: translate(0%, 0%);
@@ -1452,9 +1531,9 @@
1452 1531 .qcl-openai div#wp-chatbot-openrouter-settings label.form-check-label span.pro-badge {
1453 1532 font-size: 9px;
1454 1533 font-weight: 400;
1455 1534 color: #ffffff;
1456 - background: #5B4E96;
1535 + background: var(--woobot-primary);
1457 1536 border-radius: 20px;
1458 1537 padding: 2px 8px;
1459 1538 margin-left: 5px;
1460 1539 text-transform: uppercase;
@@ -1724,9 +1803,9 @@
1724 1803 margin: 2px 10px;
1725 1804 font-size: 15px;
1726 1805 font-weight: 500;
1727 1806 border: none;
1728 - background: #5b4e96;
1807 + background: var(--woobot-primary);
1729 1808 color: #fff;
1730 1809 padding: 14px 20px !important;
1731 1810 display: flex;
1732 1811 align-items: center;
@@ -1735,20 +1814,20 @@
1735 1814
1736 1815 .content_qcbot_help_secion .panel-default>.panel-heading {
1737 1816 color: #333;
1738 1817 background-color: #f5f5f5;
1739 - border-color: #5B4E96;
1818 + border-color: var(--woobot-primary);
1740 1819 background: #fff !important;
1741 - color: #5B4E96 !important;
1820 + color: var(--woobot-primary) !important;
1742 1821 text-decoration: none !important;
1743 1822 border-radius: 8px;
1744 - border: 2px solid #5B4E96;
1823 + border: 2px solid var(--woobot-primary);
1745 1824 padding: 0;
1746 1825 }
1747 1826
1748 1827
1749 1828 .content_qcbot_help_secion .panel-default>.panel-heading:hover {
1750 - background: #5B4E96 !important;
1829 + background: var(--woobot-primary) !important;
1751 1830 color: #ffffff !important;
1752 1831 text-decoration: none !important;
1753 1832 border-radius: 8px;
1754 1833 }
@@ -1769,9 +1848,9 @@
1769 1848 display: block;
1770 1849 padding: 15px 12px;
1771 1850 font-size: 16px;
1772 1851 font-weight: bold;
1773 - color: #5B4E96;
1852 + color: var(--woobot-primary);
1774 1853 }
1775 1854
1776 1855 .content_qcbot_help_secion p {
1777 1856 font-size: 15px;
@@ -1861,9 +1940,9 @@
1861 1940 display: block;
1862 1941 padding: 15px 12px;
1863 1942 font-size: 16px;
1864 1943 color: #fff;
1865 - background: #5B4E96;
1944 + background: var(--woobot-primary);
1866 1945 width: 100%;
1867 1946 text-align: left;
1868 1947 }
1869 1948
@@ -1891,12 +1970,12 @@
1891 1970 font-size: 16px;
1892 1971 line-height: 1.71428571;
1893 1972 font-weight: 600;
1894 1973 background: #ffffff;
1895 - color: #5b4e96;
1974 + color: var(--woobot-primary);
1896 1975 text-decoration: none;
1897 1976 white-space: nowrap;
1898 - border: 1px solid #5b4e96;
1977 + border: 1px solid var(--woobot-primary);
1899 1978 padding: 14px 20px !important;
1900 1979 line-height: normal !important;
1901 1980 border-radius: 6px;
1902 1981
@@ -1909,13 +1988,13 @@
1909 1988 margin-left: .5em;
1910 1989 font-size: 16px;
1911 1990 line-height: 1.71428571;
1912 1991 font-weight: 600;
1913 - background: #5b4e96;
1992 + background: var(--woobot-primary);
1914 1993 color: #fff;
1915 1994 text-decoration: none;
1916 1995 white-space: nowrap;
1917 - border: 1px solid #5b4e96;
1996 + border: 1px solid var(--woobot-primary);
1918 1997 padding: 14px 20px !important;
1919 1998 line-height: normal !important;
1920 1999
1921 2000 }
@@ -1937,18 +2016,18 @@
1937 2016 padding: 14px 20px;
1938 2017 width: 100%;
1939 2018 font-size: 16px;
1940 2019 font-weight: 500;
1941 - color: #988FBD;
2020 + color: var(--woobot-nav-muted);
1942 2021 border-radius: 8px;
1943 2022 position: relative;
1944 2023 display: flex;
1945 2024 align-items: center;
1946 2025 gap: 15px;
1947 - background: #5B4E96;
2026 + background: var(--woobot-primary);
1948 2027 color: #ffffff;
1949 2028 text-decoration: none;
1950 - border-color: #5b4e96 !important;
2029 + border-color: var(--woobot-primary) !important;
1951 2030 }
1952 2031
1953 2032
1954 2033
@@ -1961,9 +2040,9 @@
1961 2040 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]+label {
1962 2041 position: relative;
1963 2042 width: 18px;
1964 2043 height: 18px;
1965 - border: 2px solid #5b4e96;
2044 + border: 2px solid var(--woobot-primary);
1966 2045 border-radius: 4px;
1967 2046 top: 0;
1968 2047 left: 0;
1969 2048 transform: translate(0%, 0%);
@@ -2070,9 +2149,9 @@
2070 2149 text-align: center;
2071 2150 display: flex;
2072 2151 align-items: center;
2073 2152 justify-content: center;
2074 - background: #5b4e968f;
2153 + background: color-mix(in srgb, var(--woobot-primary) 56%, transparent);
2075 2154 color: #ffffff;
2076 2155 font-size: 60px;
2077 2156 border-radius: 8px;
2078 2157 }
@@ -2080,9 +2159,9 @@
2080 2159 text-decoration: none !important;
2081 2160 position: relative;
2082 2161 }
2083 2162 .docs_icon span {
2084 - background: #5b4e96;
2163 + background: var(--woobot-primary);
2085 2164 padding: 25px 25px;
2086 2165 border-radius: 50%;
2087 2166 font-size: 82px;
2088 2167 width: auto;
@@ -2116,14 +2195,14 @@
2116 2195
2117 2196 .wp-chatbot-wrap a.nav-tab.sld_click_handle {
2118 2197 margin-right: .5em;
2119 2198 line-height: 1.42857143;
2120 - border: 1px solid #5b4e96 !important;
2199 + border: 1px solid var(--woobot-primary) !important;
2121 2200 border-radius: 6px !important;
2122 - border: 1px solid #5b4e96 !important;
2201 + border: 1px solid var(--woobot-primary) !important;
2123 2202 padding: 10px 20px !important;
2124 2203 border-radius: 8px !important;
2125 - color: #5b4e96 !important;
2204 + color: var(--woobot-primary) !important;
2126 2205 font-size: 15px !important;
2127 2206 font-weight: 600;
2128 2207 line-height: normal !important;
2129 2208 background: #fff;
@@ -2131,11 +2210,11 @@
2131 2210
2132 2211 .wp-chatbot-wrap a.nav-tab.sld_click_handle:hover, .wp-chatbot-wrap a.nav-tab.sld_click_handle.nav-tab-active{
2133 2212 margin-right: .5em;
2134 2213 line-height: 1.42857143;
2135 - border: 1px solid #5b4e96 !important;
2214 + border: 1px solid var(--woobot-primary) !important;
2136 2215 border-radius: 6px !important;
2137 - border: 1px solid #5b4e96 !important;
2216 + border: 1px solid var(--woobot-primary) !important;
2138 2217 padding: 10px 20px !important;
2139 2218 border-radius: 8px !important;
2140 2219 color: #fff !important;
2141 2220 font-size: 15px !important;
@@ -2140,9 +2219,9 @@
2140 2219 color: #fff !important;
2141 2220 font-size: 15px !important;
2142 2221 font-weight: 600;
2143 2222 line-height: normal !important;
2144 - background: #5b4e96;
2223 + background: var(--woobot-primary);
2145 2224 }
2146 2225
2147 2226
2148 2227
@@ -2172,9 +2251,9 @@
2172 2251 padding: 14px 20px;
2173 2252 width: auto;
2174 2253 font-size: 16px;
2175 2254 font-weight: 500;
2176 - color: #988FBD;
2255 + color: var(--woobot-nav-muted);
2177 2256 border-radius: 8px;
2178 2257 position: relative;
2179 2258 display: flex;
2180 2259 align-items: center;
@@ -2181,9 +2260,9 @@
2181 2260 gap: 15px;
2182 2261 background: #d14529;
2183 2262 color: #ffffff;
2184 2263 text-decoration: none;
2185 - border-color: #5b4e96 !important;
2264 + border-color: var(--woobot-primary) !important;
2186 2265 }
2187 2266
2188 2267
2189 2268 button.swal2-confirm.btn.btn-lg.swal2-styled {
@@ -2193,9 +2272,9 @@
2193 2272 .chatbot-wpbot-lite_page_wpbot button.swal2-deny.swal2-styled {
2194 2273 display: none !important;
2195 2274 }
2196 2275 a#qcld_save_openrouter_setting {
2197 - background: #5B4E96;
2276 + background: var(--woobot-primary);
2198 2277 color: #ffffff;
2199 2278 border: none;
2200 2279 padding: 12px 30px;
2201 2280 }
@@ -2200,9 +2279,9 @@
2200 2279 padding: 12px 30px;
2201 2280 }
2202 2281
2203 2282 a#save_setting {
2204 - background: #5B4E96;
2283 + background: var(--woobot-primary);
2205 2284 color: #ffffff;
2206 2285 border: none;
2207 2286 padding: 12px 30px;
2208 2287 }
@@ -2322,12 +2401,12 @@
2322 2401 width: auto;
2323 2402 font-size: 16px;
2324 2403 align-items: center;
2325 2404 gap: 15px;
2326 - background: #5B4E96;
2405 + background: var(--woobot-primary);
2327 2406 color: #ffffff;
2328 2407 text-decoration: none;
2329 - border-color: #5b4e96 !important;
2408 + border-color: var(--woobot-primary) !important;
2330 2409 }
2331 2410
2332 2411 .wrap.qcld-main-wrapper a:focus {
2333 2412 outline: none !important;
@@ -2341,9 +2420,9 @@
2341 2420
2342 2421
2343 2422 .qcld-general-settings-connection-notic {
2344 2423 background: #eee;
2345 - border: 2px solid #5b4e96;
2424 + border: 2px solid var(--woobot-primary);
2346 2425 border-radius: 8px;
2347 2426 margin: 0 0 15px 0;
2348 2427 padding: 12px;
2349 2428 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
@@ -2364,9 +2443,9 @@
2364 2443 transition: all 200ms;
2365 2444 font-size: 30px;
2366 2445 font-weight: bold;
2367 2446 text-decoration: none;
2368 - color: #5b4e96;
2447 + color: var(--woobot-primary);
2369 2448 }
2370 2449 .qcld-general-settings-close:hover {
2371 2450 color: orange;
2372 2451 }
@@ -2403,9 +2482,9 @@
2403 2482
2404 2483 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
2405 2484 display: block;
2406 2485 padding: 0 0 0 0;
2407 - background: #5b4e96;
2486 + background: var(--woobot-primary);
2408 2487 width: 30px;
2409 2488 height: 30px;
2410 2489 line-height: 30px;
2411 2490 border-radius: 50%;
@@ -2417,9 +2496,9 @@
2417 2496 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]+label {
2418 2497 position: relative;
2419 2498 width: 18px;
2420 2499 height: 18px;
2421 - border: 2px solid #5b4e96;
2500 + border: 2px solid var(--woobot-primary);
2422 2501 border-radius: 4px;
2423 2502 top: 0;
2424 2503 left: 0;
2425 2504 transform: translate(0%, 0%);
@@ -2481,9 +2560,9 @@
2481 2560 .qcl-openai div#wp-chatbot-gemini-settings label.form-check-label span.pro-badge {
2482 2561 font-size: 9px;
2483 2562 font-weight: 400;
2484 2563 color: #ffffff;
2485 - background: #5B4E96;
2564 + background: var(--woobot-primary);
2486 2565 border-radius: 20px;
2487 2566 padding: 2px 8px;
2488 2567 margin-left: 5px;
2489 2568 text-transform: uppercase;
@@ -2575,9 +2654,9 @@
2575 2654 font-weight: bold;
2576 2655 }
2577 2656
2578 2657 a#qcld_save_gemini_setting {
2579 - background: #5B4E96;
2658 + background: var(--woobot-primary);
2580 2659 color: #ffffff;
2581 2660 border: none;
2582 2661 padding: 12px 30px;
2583 2662 }
@@ -2616,9 +2695,9 @@
2616 2695 }
2617 2696
2618 2697 .wp-chatbot-wrap .qc-opt-language-title{
2619 2698 font-weight: bold !important;
2620 - color: #5b4e96 !important;
2699 + color: var(--woobot-primary) !important;
2621 2700 font-size: 16px;
2622 2701 }
2623 2702
2624 2703 button.qcld_chatbot_custom_icon_button.button, button.wp_chatbot_custom_agent_button.button {
@@ -2625,22 +2704,22 @@
2625 2704 padding: 2px 20px;
2626 2705 width: auto;
2627 2706 font-size: 14px;
2628 2707 font-weight: 500;
2629 - color: #988FBD;
2708 + color: var(--woobot-nav-muted);
2630 2709 border-radius: 8px;
2631 2710 background: #fff;
2632 - color: #5B4E96;
2711 + color: var(--woobot-primary);
2633 2712 text-decoration: none;
2634 2713 margin: 0;
2635 - border: 2px solid #5B4E96;
2714 + border: 2px solid var(--woobot-primary);
2636 2715
2637 2716 }
2638 2717
2639 2718 button.qcld_chatbot_custom_icon_button.button:hover, button.wp_chatbot_custom_agent_button.button:hover {
2640 - background: #5B4E96;
2719 + background: var(--woobot-primary);
2641 2720 color: #fff;
2642 - border: 2px solid #5B4E96;
2721 + border: 2px solid var(--woobot-primary);
2643 2722
2644 2723 }
2645 2724
2646 2725
@@ -2706,18 +2785,18 @@
2706 2785 padding: 14px 30px;
2707 2786 width: auto;
2708 2787 font-size: 16px;
2709 2788 font-weight: 500;
2710 - color: #988FBD;
2789 + color: var(--woobot-nav-muted);
2711 2790 border-radius: 8px;
2712 2791 position: relative;
2713 2792 display: inline-block;
2714 2793 align-items: center;
2715 2794 gap: 15px;
2716 - background: #5B4E96;
2795 + background: var(--woobot-primary);
2717 2796 color: #ffffff;
2718 2797 text-decoration: none;
2719 - border-color: #5b4e96 !important;
2798 + border-color: var(--woobot-primary) !important;
2720 2799 line-height: normal;
2721 2800 }
2722 2801 div#wpfooter {
2723 2802 display: none;
@@ -2732,9 +2811,9 @@
2732 2811 padding: 0 0 8px 0;
2733 2812 margin: 20px 0 12px 0;
2734 2813 font-weight: bold;
2735 2814 font-size: 22px !important;
2736 - color: #5b4e96 !important;
2815 + color: var(--woobot-primary) !important;
2737 2816 }
2738 2817
2739 2818 div#rag-sync .wrap h3 {
2740 2819 padding: 0 0 8px 0;
@@ -2740,20 +2819,20 @@
2740 2819 padding: 0 0 8px 0;
2741 2820 margin: 10px 0 12px 0;
2742 2821 font-weight: bold;
2743 2822 font-size: 22px !important;
2744 - color: #5b4e96 !important;
2823 + color: var(--woobot-primary) !important;
2745 2824 }
2746 2825
2747 2826 div#rag-settings h2.nav-tab-wrapper a {
2748 2827 margin-right: 0;
2749 2828 line-height: 1.42857143;
2750 - border: 1px solid #5b4e96;
2829 + border: 1px solid var(--woobot-primary);
2751 2830 border-radius: 6px;
2752 - border: 1px solid #5b4e96;
2831 + border: 1px solid var(--woobot-primary);
2753 2832 padding: 10px 20px !important;
2754 2833 border-radius: 8px;
2755 - color: #5b4e96;
2834 + color: var(--woobot-primary);
2756 2835 font-size: 15px;
2757 2836 font-weight: 600;
2758 2837 line-height: normal !important;
2759 2838 background: #fff;
@@ -2766,11 +2845,11 @@
2766 2845 }
2767 2846
2768 2847 div#rag-settings h2.nav-tab-wrapper a:hover, div#rag-settings h2.nav-tab-wrapper a.nav-tab-active, div#rag-settings h2.nav-tab-wrapper a:focus {
2769 2848 color: #fff;
2770 - background: #5b4e96;
2849 + background: var(--woobot-primary);
2771 2850 text-decoration: none !important;
2772 - border: 1px solid #5b4e96;
2851 + border: 1px solid var(--woobot-primary);
2773 2852 }
2774 2853
2775 2854
2776 2855
@@ -2778,18 +2857,18 @@
2778 2857 padding: 8px 15px;
2779 2858 width: auto;
2780 2859 font-size: 16px;
2781 2860 font-weight: 500;
2782 - color: #988FBD;
2861 + color: var(--woobot-nav-muted);
2783 2862 border-radius: 8px;
2784 2863 position: relative;
2785 2864 display: inline-block;
2786 2865 align-items: center;
2787 2866 gap: 15px;
2788 - background: #5B4E96;
2867 + background: var(--woobot-primary);
2789 2868 color: #ffffff;
2790 2869 text-decoration: none;
2791 - border-color: #5b4e96 !important;
2870 + border-color: var(--woobot-primary) !important;
2792 2871 line-height: normal;
2793 2872 }
2794 2873
2795 2874 div#rag-sync .wrap {
@@ -2815,10 +2894,10 @@
2815 2894 text-align: right;
2816 2895 padding: 8px 0;
2817 2896 }
2818 2897 button#botmaster_submit_sitemap_btn {
2819 - background: #5B4E96;
2820 - border-color: #5B4E96;
2898 + background: var(--woobot-primary);
2899 + border-color: var(--woobot-primary);
2821 2900 }
2822 2901 div#rag-database h3 {
2823 2902 padding: 0 0 8px 0;
2824 2903 margin: 15px 0 8px 0;
@@ -2823,18 +2902,18 @@
2823 2902 padding: 0 0 8px 0;
2824 2903 margin: 15px 0 8px 0;
2825 2904 font-weight: bold;
2826 2905 font-size: 22px !important;
2827 - color: #5b4e96 !important;
2906 + color: var(--woobot-primary) !important;
2828 2907 }
2829 2908
2830 2909 .qcl-openai div#rag-settings h2.nav-tab-wrapper a:focus {
2831 - border: 1px solid #5b4e96 !important;
2910 + border: 1px solid var(--woobot-primary) !important;
2832 2911 }
2833 2912 button#rag-delete-all {
2834 - background: #5b4e96;
2913 + background: var(--woobot-primary);
2835 2914 color: #fff;
2836 - border-color: #5b4e96;
2915 + border-color: var(--woobot-primary);
2837 2916 }
2838 2917
2839 2918 div#rag-database table.widefat {
2840 2919 border: 1px solid #ffffff;
@@ -2844,9 +2923,9 @@
2844 2923 border-bottom: 1px solid #ffffff;
2845 2924 }
2846 2925
2847 2926 div#rag-database table.widefat thead {
2848 - background: #5b4e96;
2927 + background: var(--woobot-primary);
2849 2928 color: #fff;
2850 2929 }
2851 2930 div#rag-database table.widefat thead th {
2852 2931 color: #fff;
@@ -2865,11 +2944,11 @@
2865 2944 div#qcld-rag-settings-tab .wrap .mb-3 {
2866 2945 padding: 5px 0;
2867 2946 }
2868 2947 div#rag-database input#search-submit {
2869 - background: #5b4e96;
2948 + background: var(--woobot-primary);
2870 2949 color: #fff;
2871 - border-color: #5b4e96;
2950 + border-color: var(--woobot-primary);
2872 2951 }
2873 2952 .rag_embed_cpts_wrapper {
2874 2953 display: flex;
2875 2954 flex-direction: column;
@@ -2879,15 +2958,15 @@
2879 2958 display: flex;
2880 2959 gap: 10px;
2881 2960 }
2882 2961 div#wp-chatbot-grok-settings a#qcld_save_grok_setting {
2883 - background: #5B4E96;
2962 + background: var(--woobot-primary);
2884 2963 color: #ffffff;
2885 2964 border: none;
2886 2965 padding: 12px 30px;
2887 2966 }
2888 2967 button#qcld_gemini_fetch_models {
2889 - background: #5B4E96;
2968 + background: var(--woobot-primary);
2890 2969 color: #ffffff;
2891 2970 border: none;
2892 2971 }
2893 2972 .wp-chatbot-wrap label.block.text-sm.font-medium.text-gray-700.mb-2.qc-opt-language-title {
@@ -2900,14 +2979,14 @@
2900 2979 padding: 0 4px;
2901 2980 min-width: 220px;
2902 2981 }
2903 2982 select#qcld_language_center_select:focus {
2904 - border-color: #5b4e96;
2905 - color: #5b4e96;
2906 - box-shadow: 0 0 0 1px #5b4e96;
2983 + border-color: var(--woobot-primary);
2984 + color: var(--woobot-primary);
2985 + box-shadow: 0 0 0 1px var(--woobot-primary);
2907 2986 }
2908 2987 div#common-ai-settings h2 a {
2909 - background: #5B4E96;
2988 + background: var(--woobot-primary);
2910 2989 color: #ffffff;
2911 2990 display: inline-block !important;
2912 2991 font-size: 16px;
2913 2992 padding: 8px 15px;
@@ -2938,23 +3017,23 @@
2938 3017 padding: 8px 15px;
2939 3018 width: auto;
2940 3019 font-size: 16px;
2941 3020 font-weight: 500;
2942 - color: #988FBD;
3021 + color: var(--woobot-nav-muted);
2943 3022 border-radius: 8px;
2944 3023 position: relative;
2945 3024 display: inline-block;
2946 3025 align-items: center;
2947 3026 gap: 15px;
2948 - background: #5B4E96;
3027 + background: var(--woobot-primary);
2949 3028 color: #ffffff;
2950 3029 text-decoration: none;
2951 - border-color: #5b4e96 !important;
3030 + border-color: var(--woobot-primary) !important;
2952 3031 line-height: normal;
2953 3032 }
2954 3033 button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
2955 - background: #5B4E96;
2956 - border-color: #5B4E96;
3034 + background: var(--woobot-primary);
3035 + border-color: var(--woobot-primary);
2957 3036 }
2958 3037 .wpbot-wizard-field select#wizard_ai_provider {
2959 3038 background: transparent;
2960 3039 color: #fff;
@@ -2962,11 +3041,11 @@
2962 3041 display: block;
2963 3042 max-width: unset;
2964 3043 }
2965 3044 .wpbot-wizard-field select#wizard_ai_provider:hover {
2966 - border-color: #5b4e96;
2967 - color: #5b4e96;
2968 - box-shadow: 0 0 0 1px #5b4e96;
3045 + border-color: var(--woobot-primary);
3046 + color: var(--woobot-primary);
3047 + box-shadow: 0 0 0 1px var(--woobot-primary);
2969 3048 }
2970 3049 div#wizard_api_key_container input#wizard_api_key {
2971 3050 background: transparent;
2972 3051 color: #fff;
@@ -2971,9 +3050,9 @@
2971 3050 background: transparent;
2972 3051 color: #fff;
2973 3052 }
2974 3053 div#collapseTwoControl input[type=radio]:checked::before {
2975 - background-color: #5b4e96;
3054 + background-color: var(--woobot-primary);
2976 3055 }
2977 3056 .nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
2978 3057 width: 320px !important;
2979 3058 gap: 0;
@@ -3002,9 +3081,9 @@
3002 3081 transform: scale(1);
3003 3082 }
3004 3083 }
3005 3084 footer.wp-chatbot-admin-footer input#submit {
3006 - background: #5b4e96;
3085 + background: var(--woobot-primary);
3007 3086 padding: 12px 30px;
3008 3087 }
3009 3088 footer.wp-chatbot-admin-footer {
3010 3089 padding: 0 20px 20px 20px;
@@ -3012,10 +3091,10 @@
3012 3091 }
3013 3092 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
3014 3093 padding: 8px 15px;
3015 3094 background: #ffffff;
3016 - color: #5B4E96;
3017 - border: 2px solid #5B4E96;
3095 + color: var(--woobot-primary);
3096 + border: 2px solid var(--woobot-primary);
3018 3097 border-radius: 6px;
3019 3098 font-weight: bold;
3020 3099 position: absolute;
3021 3100 top: 30px;
@@ -3024,11 +3103,11 @@
3024 3103 min-height: unset;
3025 3104 }
3026 3105 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
3027 3106 padding: 8px 15px;
3028 - background: #5B4E96;
3107 + background: var(--woobot-primary);
3029 3108 color: #fff;
3030 - border: 2px solid #5B4E96;
3109 + border: 2px solid var(--woobot-primary);
3031 3110 border-radius: 6px;
3032 3111 font-weight: bold;
3033 3112 position: absolute;
3034 3113 top: 31px;
@@ -3034,9 +3113,9 @@
3034 3113 top: 31px;
3035 3114 left: 280px;
3036 3115 }
3037 3116 .qcld-session-history_menu_box .btn.btn-primary {
3038 - background: #564a8e !important;
3117 + background: var(--woobot-primary) !important;
3039 3118 color: #fff !important;
3040 3119 }
3041 3120 .qcld-session-history_menu_box a.btn.btn-success {
3042 3121 padding: 8px 24px;
@@ -3045,12 +3124,12 @@
3045 3124 font-weight: 500;
3046 3125 border-radius: 8px;
3047 3126 position: relative;
3048 3127 background: #ffffff;
3049 - color: #564a8e;
3128 + color: var(--woobot-primary);
3050 3129 text-decoration: none;
3051 3130 line-height: normal;
3052 - border: 2px solid #564a8e;
3131 + border: 2px solid var(--woobot-primary);
3053 3132 }
3054 3133 .qcld-session-history_menu_box a.btn.btn-success:hover {
3055 3134 padding: 8px 24px;
3056 3135 width: auto;
@@ -3057,13 +3136,13 @@
3057 3136 font-size: 15px;
3058 3137 font-weight: 500;
3059 3138 border-radius: 8px;
3060 3139 position: relative;
3061 - background: #564a8e;
3140 + background: var(--woobot-primary);
3062 3141 color: #fff;
3063 3142 text-decoration: none;
3064 3143 line-height: normal;
3065 - border: 2px solid #564a8e;
3144 + border: 2px solid var(--woobot-primary);
3066 3145 }
3067 3146 .Expandmore {
3068 3147 background: #23ab10;
3069 3148 display: inline-block;
@@ -3096,9 +3175,9 @@
3096 3175 .avatar-location-wrapper {
3097 3176 padding: 0 0 25px 0;
3098 3177 }
3099 3178 .avatar-location-card.active {
3100 - background: #5b4e96;
3179 + background: var(--woobot-primary);
3101 3180 color: #ffffff;
3102 3181 }
3103 3182 .avatar-location-card.active svg {
3104 3183 color: #ffffff;
@@ -3125,5 +3204,578 @@
3125 3204 width: 410px;
3126 3205 }
3127 3206 .ai-provider-cards-wrapper {
3128 3207 display: flex;
3129 -}
3208 +}
3209 +
3210 +/* AI Actions page — match WPBot Control Panel layout */
3211 +body.chatbot-wpbot-lite_page_wpbot_ai_actions,
3212 +body.chatbot-wpbot-lite_page_wbcs-botsessions-page,
3213 +body.wpbot-panel_page_wbcs-botsessions-page {
3214 + background-color: var(--woobot-page-bg);
3215 +}
3216 +
3217 +.wp-chatbot-tabs.qcld-ai-actions-layout {
3218 + display: flex;
3219 + align-items: flex-start;
3220 + gap: 20px;
3221 + overflow: visible;
3222 +}
3223 +
3224 +.wp-chatbot-tabs.qcld-ai-actions-layout > nav {
3225 + width: 240px;
3226 + min-width: 240px;
3227 + flex-shrink: 0;
3228 + float: none;
3229 + margin-right: 0;
3230 + position: sticky;
3231 + top: 32px;
3232 +}
3233 +
3234 +.wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3235 + flex: 1 1 auto;
3236 + min-width: 0;
3237 + width: auto !important;
3238 + float: none;
3239 + padding: 24px;
3240 + background: #fff;
3241 + border-radius: 16px;
3242 +}
3243 +
3244 +.wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3245 + width: 360px;
3246 + min-width: 320px;
3247 + flex-shrink: 0;
3248 + float: none;
3249 + margin: 0;
3250 + padding: 0;
3251 + background: transparent;
3252 + position: sticky;
3253 + top: 32px;
3254 +}
3255 +
3256 +.qcld-ai-actions-layout .ai-saved-actions-submenu {
3257 + list-style: none;
3258 + margin: 4px 0 0;
3259 + padding: 0 0 6px;
3260 +}
3261 +
3262 +.qcld-ai-actions-layout .ai-saved-actions-submenu li a {
3263 + padding: 10px 12px 10px 48px;
3264 + font-size: 14px;
3265 + font-weight: 500;
3266 + color: var(--woobot-nav-muted);
3267 + border-radius: 8px;
3268 +}
3269 +
3270 +.qcld-ai-actions-layout .ai-saved-actions-submenu li.tab-current a,
3271 +.qcld-ai-actions-layout .ai-saved-actions-submenu li a:hover {
3272 + background: var(--woobot-primary);
3273 + color: #fff;
3274 +}
3275 +
3276 +.qcld-ai-actions-layout .ai-no-saved-actions {
3277 + padding: 8px 12px 8px 48px;
3278 + color: var(--woobot-nav-muted);
3279 + font-size: 13px;
3280 + font-style: italic;
3281 +}
3282 +
3283 +.qcld-ai-actions-layout .ai-sidebar-parent-link {
3284 + position: relative;
3285 +}
3286 +
3287 +.qcld-ai-actions-layout .qcld-ai-saved-toggle {
3288 + margin-left: auto;
3289 + font-size: 16px;
3290 + width: 16px;
3291 + height: 16px;
3292 +}
3293 +
3294 +.qcld-ai-template-grid {
3295 + display: grid;
3296 + grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
3297 + gap: 16px;
3298 + margin-top: 20px;
3299 +}
3300 +
3301 +.qcld-ai-actions-page .ai-template-card {
3302 + background: #fff;
3303 + border: 1px solid #E5E6F2;
3304 + border-radius: 16px;
3305 + padding: 22px 16px;
3306 + cursor: pointer;
3307 + text-align: center;
3308 + transition: all 0.2s ease;
3309 +}
3310 +
3311 +.qcld-ai-actions-page .ai-template-card:hover {
3312 + border-color: var(--woobot-primary);
3313 + box-shadow: 0 8px 20px rgba(var(--woobot-primary-rgb), 0.12);
3314 + transform: translateY(-2px);
3315 + background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
3316 +}
3317 +
3318 +.qcld-ai-actions-page .ai-template-card-icon {
3319 + color: var(--woobot-primary);
3320 + margin-bottom: 12px;
3321 +}
3322 +
3323 +.qcld-ai-actions-page .ai-template-card-icon .dashicons {
3324 + font-size: 36px;
3325 + width: 36px;
3326 + height: 36px;
3327 +}
3328 +
3329 +.qcld-ai-actions-page .ai-template-card h4 {
3330 + margin: 0 0 8px;
3331 + font-size: 15px;
3332 + font-weight: 700;
3333 + color: var(--woobot-primary);
3334 +}
3335 +
3336 +.qcld-ai-actions-page .ai-template-card p {
3337 + margin: 0;
3338 + font-size: 13px;
3339 + color: #6b638f;
3340 + line-height: 1.45;
3341 +}
3342 +
3343 +.qcld-ai-actions-alert {
3344 + color: #fff;
3345 + background: #e64340;
3346 + padding: 12px 16px;
3347 + border-radius: 8px;
3348 + margin-bottom: 20px;
3349 +}
3350 +
3351 +.qcld-ai-action-edit-head {
3352 + display: flex;
3353 + justify-content: space-between;
3354 + align-items: center;
3355 + gap: 12px;
3356 + margin-bottom: 16px;
3357 + border-bottom: 1px solid #E5E6F2;
3358 + padding-bottom: 12px;
3359 +}
3360 +
3361 +.qcld-ai-action-edit-head .qcld-wpbot-main-tabs-title {
3362 + margin: 0;
3363 + border-bottom: 0;
3364 + padding: 0;
3365 +}
3366 +
3367 +.qcld-ai-action-edit-actions {
3368 + display: flex;
3369 + align-items: center;
3370 + gap: 10px;
3371 + flex-wrap: wrap;
3372 + justify-content: flex-end;
3373 +}
3374 +
3375 +.qcld-ai-actions-page .qcld-ai-goto-new-action {
3376 + padding: 10px 18px;
3377 + font-size: 14px;
3378 + line-height: 1.2;
3379 + white-space: nowrap;
3380 +}
3381 +
3382 +.qcld-ai-actions-page .remove-ai-form {
3383 + color: #e64340;
3384 + border: 1px solid #e64340;
3385 + background: #fff;
3386 + border-radius: 8px;
3387 +}
3388 +
3389 +.qcld-ai-actions-page .remove-ai-form:hover {
3390 + background: #e64340;
3391 + color: #fff;
3392 +}
3393 +
3394 +.qcld-ai-actions-page .wpbot-ai-inner-tabs {
3395 + margin-bottom: 20px;
3396 +}
3397 +
3398 +.qcld-ai-history-pro-tab {
3399 + opacity: 0.65;
3400 + cursor: not-allowed !important;
3401 +}
3402 +
3403 +.qcld-ai-actions-page .qc_wpbot_pro {
3404 + background: #e64340;
3405 + color: #fff;
3406 + font-size: 10px;
3407 + padding: 2px 6px;
3408 + border-radius: 4px;
3409 + margin-left: 5px;
3410 + vertical-align: middle;
3411 +}
3412 +
3413 +.qcld-ai-actions-page .form-group label,
3414 +.qcld-ai-actions-page .qcld-ai-email-field label {
3415 + display: block;
3416 + font-weight: 600;
3417 + margin-bottom: 6px;
3418 + color: var(--woobot-primary);
3419 +}
3420 +
3421 +.qcld-ai-actions-page .form-group.qcld-ai-email-toggle {
3422 + display: flex;
3423 + align-items: center;
3424 + border: none;
3425 + padding: 4px 0 10px;
3426 + margin-bottom: 8px;
3427 +}
3428 +
3429 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] {
3430 + position: absolute;
3431 + opacity: 0;
3432 + width: 1px;
3433 + height: 1px;
3434 + pointer-events: none;
3435 +}
3436 +
3437 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label {
3438 + position: relative;
3439 + display: flex;
3440 + align-items: center;
3441 + width: auto;
3442 + height: auto;
3443 + min-height: 22px;
3444 + margin: 0;
3445 + padding: 0 0 0 34px;
3446 + border: none;
3447 + border-radius: 0;
3448 + text-indent: 0;
3449 + font: 600 16px/22px "DM Sans", sans-serif;
3450 + color: var(--woobot-primary);
3451 + cursor: pointer;
3452 + white-space: nowrap;
3453 + user-select: none;
3454 +}
3455 +
3456 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:before {
3457 + content: "";
3458 + position: absolute;
3459 + left: 0;
3460 + top: 50%;
3461 + width: 22px;
3462 + height: 22px;
3463 + margin-top: -11px;
3464 + border: 2px solid var(--woobot-primary);
3465 + border-radius: 4px;
3466 + background: #fff;
3467 + box-sizing: border-box;
3468 + transition: all ease-out 200ms;
3469 +}
3470 +
3471 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox] + label:after {
3472 + content: "";
3473 + position: absolute;
3474 + left: 7px;
3475 + top: 8px;
3476 + width: 6px;
3477 + height: 11px;
3478 + margin-top: -7px;
3479 + border-bottom: 2px solid #fff;
3480 + border-right: 2px solid #fff;
3481 + border-left: none;
3482 + transform: rotate(45deg);
3483 + opacity: 0;
3484 + transition: opacity ease-out 200ms;
3485 +}
3486 +
3487 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label {
3488 + border: none;
3489 +}
3490 +
3491 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:before {
3492 + background: #22b573;
3493 + border-color: #22b573;
3494 +}
3495 +
3496 +.qcld-ai-actions-page .wp-chatbot-wrap .form-group.qcld-ai-email-toggle input[type=checkbox]:checked + label:after {
3497 + opacity: 1;
3498 + width: 6px;
3499 +}
3500 +
3501 +.qcld-ai-actions-page .form-group input[type="text"],
3502 +.qcld-ai-actions-page .form-group textarea,
3503 +.qcld-ai-actions-page .qcld-ai-email-field input[type="text"] {
3504 + width: 100%;
3505 + max-width: 100%;
3506 + border: 1px solid #E5E6F2;
3507 + border-radius: 8px;
3508 + padding: 10px 12px;
3509 +}
3510 +
3511 +.qcld-ai-email-field {
3512 + margin-top: 12px;
3513 +}
3514 +
3515 +.qcld-ai-field-hint,
3516 +.qcld-ai-muted {
3517 + margin: 6px 0 0;
3518 + font-size: 13px;
3519 + color: #888;
3520 + font-style: italic;
3521 +}
3522 +
3523 +.qcld-ai-save-footer {
3524 + display: flex;
3525 + flex-direction: column;
3526 + align-items: flex-start;
3527 + gap: 12px;
3528 + padding: 16px 0 0;
3529 +}
3530 +
3531 +.qcld-ai-save-footer .cxsc-settings-blocks-notic {
3532 + width: 100%;
3533 +}
3534 +
3535 +.qcld-ai-save-footer .cxsc-settings-blocks-notic a {
3536 + color: var(--woobot-primary);
3537 + font-weight: 700;
3538 +}
3539 +
3540 +.qcld-ai-playground {
3541 + background: #fff;
3542 + border-radius: 16px;
3543 + overflow: hidden;
3544 + box-shadow: 0 8px 24px rgba(var(--woobot-primary-rgb), 0.08);
3545 + border: 1px solid #E5E6F2;
3546 +}
3547 +
3548 +.qcld-ai-playground-header {
3549 + background: var(--woobot-primary);
3550 + color: #fff;
3551 + padding: 14px 16px;
3552 + font-weight: 700;
3553 + text-align: center;
3554 + position: relative;
3555 +}
3556 +
3557 +.qcld-ai-playground-header #ai-playground-refresh {
3558 + position: absolute;
3559 + right: 12px;
3560 + top: 10px;
3561 + background: transparent;
3562 + border: none;
3563 + color: #fff;
3564 + cursor: pointer;
3565 + padding: 0;
3566 +}
3567 +
3568 +.qcld-ai-playground-header #ai-playground-refresh .dashicons {
3569 + font-size: 20px;
3570 + width: 20px;
3571 + height: 20px;
3572 +}
3573 +
3574 +#ai-actions-playground-container {
3575 + padding: 16px;
3576 + display: flex;
3577 + flex-direction: column;
3578 + height: 420px;
3579 + overflow-y: auto;
3580 + background: var(--woobot-page-bg);
3581 +}
3582 +
3583 +#ai-actions-playground-messages {
3584 + display: flex;
3585 + flex-direction: column;
3586 + justify-content: flex-end;
3587 + flex: 1;
3588 +}
3589 +
3590 +.qcld-ai-pg-bot-row {
3591 + display: flex;
3592 + gap: 10px;
3593 + align-items: flex-end;
3594 + margin-bottom: 12px;
3595 +}
3596 +
3597 +.qcld-ai-pg-user-row {
3598 + display: flex;
3599 + justify-content: flex-end;
3600 + margin-bottom: 12px;
3601 +}
3602 +
3603 +.qcld-ai-pg-avatar {
3604 + width: 36px;
3605 + height: 36px;
3606 + background: var(--woobot-primary);
3607 + border-radius: 50%;
3608 + flex-shrink: 0;
3609 + background-size: cover;
3610 + background-position: center;
3611 +}
3612 +
3613 +.qcld-ai-pg-bubble {
3614 + background: #fff;
3615 + padding: 12px;
3616 + border-radius: 16px;
3617 + border-bottom-left-radius: 4px;
3618 + box-shadow: 0 2px 6px rgba(var(--woobot-primary-rgb), 0.08);
3619 + width: 100%;
3620 + max-width: 80%;
3621 + font-size: 13px;
3622 + color: #333;
3623 + line-height: 1.45;
3624 + overflow-wrap: break-word;
3625 +}
3626 +
3627 +.qcld-ai-pg-bubble p {
3628 + margin: 0 0 10px;
3629 + font-size: 13px;
3630 +}
3631 +
3632 +.qcld-ai-pg-bubble.is-loading {
3633 + color: var(--woobot-nav-muted);
3634 +}
3635 +
3636 +.qcld-ai-pg-user-bubble {
3637 + background: var(--woobot-primary);
3638 + color: #fff;
3639 + padding: 8px 12px;
3640 + border-radius: 16px;
3641 + border-bottom-right-radius: 4px;
3642 + max-width: 80%;
3643 + font-size: 13px;
3644 +}
3645 +
3646 +#ai-actions-live-preview {
3647 + display: flex;
3648 + flex-wrap: wrap;
3649 + gap: 6px;
3650 +}
3651 +
3652 +.playground-ai-action-btn {
3653 + background: #fff;
3654 + border: 1px solid var(--woobot-primary);
3655 + padding: 6px 12px;
3656 + border-radius: 16px;
3657 + font-size: 12px;
3658 + color: var(--woobot-primary);
3659 + cursor: pointer;
3660 + display: inline-block;
3661 + transition: all 0.2s;
3662 +}
3663 +
3664 +.playground-ai-action-btn:hover {
3665 + background: var(--woobot-primary);
3666 + color: #fff;
3667 +}
3668 +
3669 +.playground-ai-action-btn.is-empty {
3670 + cursor: default;
3671 + border-color: #E5E6F2;
3672 + color: #888;
3673 + background: #f7f7fb;
3674 +}
3675 +
3676 +.playground-ai-action-btn.is-empty:hover {
3677 + background: #f7f7fb;
3678 + color: #888;
3679 +}
3680 +
3681 +.qcld-ai-pg-form-data {
3682 + background: var(--woobot-page-bg);
3683 + padding: 10px;
3684 + border-left: 3px solid var(--woobot-primary);
3685 + margin: 10px 0;
3686 + border-radius: 6px;
3687 +}
3688 +
3689 +.qcld-ai-pg-form-data strong {
3690 + display: block;
3691 + margin-bottom: 5px;
3692 + color: var(--woobot-primary);
3693 + text-transform: capitalize;
3694 +}
3695 +
3696 +.qcld-ai-pg-form-data ul {
3697 + margin: 0;
3698 + padding-left: 15px;
3699 + font-size: 13px;
3700 + color: #333;
3701 +}
3702 +
3703 +.qcld-ai-playground-footer {
3704 + padding: 12px;
3705 + background: #fff;
3706 + border-top: 1px solid #E5E6F2;
3707 + display: flex;
3708 + gap: 8px;
3709 + align-items: center;
3710 +}
3711 +
3712 +.qcld-ai-playground-footer #playground-input {
3713 + width: 100%;
3714 + background: var(--woobot-page-bg);
3715 + border: 1px solid #E5E6F2;
3716 + border-radius: 20px;
3717 + padding: 10px 14px;
3718 + color: #333;
3719 + font-size: 13px;
3720 + outline: none;
3721 +}
3722 +
3723 +.qcld-ai-playground-footer #playground-send-btn {
3724 + border: none;
3725 + border-radius: 50%;
3726 + width: 40px;
3727 + height: 40px;
3728 + background: var(--woobot-primary);
3729 + color: #fff;
3730 + cursor: pointer;
3731 + display: flex;
3732 + align-items: center;
3733 + justify-content: center;
3734 + flex-shrink: 0;
3735 +}
3736 +
3737 +.qcld-ai-playground-footer #playground-send-btn .dashicons {
3738 + font-size: 18px;
3739 + width: 18px;
3740 + height: 18px;
3741 + line-height: 1;
3742 +}
3743 +
3744 +.qcld-ai-actions-page .ai-content-pane {
3745 + animation: qcldAiFadeIn 0.3s ease-in-out;
3746 +}
3747 +
3748 +div#ai-saved-actions-container h2.nav-tab-wrapper.wpbot-ai-inner-tabs {
3749 + padding: 0 0 12px 0;
3750 + border: none;
3751 +}
3752 +
3753 +@keyframes qcldAiFadeIn {
3754 + from { opacity: 0; transform: translateY(5px); }
3755 + to { opacity: 1; transform: translateY(0); }
3756 +}
3757 +
3758 +@media (max-width: 1280px) {
3759 + .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap {
3760 + width: auto !important;
3761 + }
3762 + .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3763 + width: 300px;
3764 + min-width: 280px;
3765 + }
3766 +}
3767 +
3768 +@media (max-width: 992px) {
3769 + .wp-chatbot-tabs.qcld-ai-actions-layout {
3770 + flex-wrap: wrap;
3771 + }
3772 + .wp-chatbot-tabs.qcld-ai-actions-layout > nav,
3773 + .wp-chatbot-tabs.qcld-ai-actions-layout .content-wrap,
3774 + .wp-chatbot-tabs.qcld-ai-actions-layout .qcld-ai-actions-playground {
3775 + width: 100% !important;
3776 + min-width: 0;
3777 + position: static;
3778 + }
3779 +}
3780 +
3781 +