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 +746 -147 8.6.98.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;
@@ -1069,9 +1097,9 @@
1069 1097 .wp-chatbot-wrap .form-group input[type=checkbox]+label {
1070 1098 position: relative;
1071 1099 width: 18px;
1072 1100 height: 18px;
1073 - border: 2px solid #5b4e96;
1101 + border: 2px solid var(--woobot-primary);
1074 1102 border-radius: 4px;
1075 1103 top: 0;
1076 1104 left: 0;
1077 1105 transform: translate(0%, 0%);
@@ -1140,9 +1168,9 @@
1140 1168 padding: 0;
1141 1169 display: flex;
1142 1170 flex-direction: column;
1143 1171 align-content: flex-start;
1144 - border: 15px solid #f5f7fd;
1172 + border: 15px solid var(--woobot-page-bg);
1145 1173 border-radius: 16px;
1146 1174 min-height: 480px;
1147 1175 }
1148 1176
@@ -1183,12 +1211,12 @@
1183 1211 padding: 0;
1184 1212 border: none;
1185 1213 box-shadow: none;
1186 1214 background: #fff !important;
1187 - color: #5B4E96 !important;
1215 + color: var(--woobot-primary) !important;
1188 1216 text-decoration: none !important;
1189 1217 border-radius: 8px;
1190 - border: 2px solid #5B4E96;
1218 + border: 2px solid var(--woobot-primary);
1191 1219 }
1192 1220
1193 1221 .admin-maxwith.qcld-openai-main-box div#qcldopenaiaccordion .card h2 {
1194 1222 margin: 0;
@@ -1200,9 +1228,9 @@
1200 1228 font-weight: bold;
1201 1229 display: block;
1202 1230 padding: 15px 12px;
1203 1231 font-size: 16px;
1204 - color: #5B4E96;
1232 + color: var(--woobot-primary);
1205 1233 width: 100%;
1206 1234 text-align: left;
1207 1235 }
1208 1236
@@ -1259,9 +1287,9 @@
1259 1287 padding: 14px 20px;
1260 1288 width: 100%;
1261 1289 font-size: 16px;
1262 1290 font-weight: 500;
1263 - color: #988FBD;
1291 + color: var(--woobot-nav-muted);
1264 1292 border-radius: 8px;
1265 1293 position: relative;
1266 1294 display: flex;
1267 1295 align-items: center;
@@ -1277,15 +1305,15 @@
1277 1305 padding: 14px 20px;
1278 1306 width: 100%;
1279 1307 font-size: 16px;
1280 1308 font-weight: 500;
1281 - color: #988FBD;
1309 + color: var(--woobot-nav-muted);
1282 1310 border-radius: 8px;
1283 1311 position: relative;
1284 1312 display: flex;
1285 1313 align-items: center;
1286 1314 gap: 15px;
1287 - background: #5B4E96;
1315 + background: var(--woobot-primary);
1288 1316 color: #ffffff;
1289 1317 text-decoration: none;
1290 1318 border: none;
1291 1319 margin: 2px 0;
@@ -1296,9 +1324,9 @@
1296 1324 .wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]+label {
1297 1325 position: relative;
1298 1326 width: 18px;
1299 1327 height: 18px;
1300 - border: 2px solid #5b4e96;
1328 + border: 2px solid var(--woobot-primary);
1301 1329 border-radius: 4px;
1302 1330 top: 0;
1303 1331 left: 0;
1304 1332 transform: translate(0%, 0%);
@@ -1360,9 +1388,9 @@
1360 1388 .qcl-openai input[type=checkbox]+label {
1361 1389 position: relative;
1362 1390 width: 18px;
1363 1391 height: 18px;
1364 - border: 2px solid #5b4e96;
1392 + border: 2px solid var(--woobot-primary);
1365 1393 border-radius: 4px;
1366 1394 top: 0;
1367 1395 left: 0;
1368 1396 transform: translate(0%, 0%);
@@ -1423,9 +1451,9 @@
1423 1451 .qcl-openai label.form-check-label span.pro-badge {
1424 1452 font-size: 9px;
1425 1453 font-weight: 400;
1426 1454 color: #ffffff;
1427 - background: #5B4E96;
1455 + background: var(--woobot-primary);
1428 1456 border-radius: 20px;
1429 1457 padding: 2px 8px;
1430 1458 margin-left: 5px;
1431 1459 text-transform: uppercase;
@@ -1440,9 +1468,9 @@
1440 1468 .qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label {
1441 1469 position: relative;
1442 1470 width: 18px;
1443 1471 height: 18px;
1444 - border: 2px solid #5b4e96;
1472 + border: 2px solid var(--woobot-primary);
1445 1473 border-radius: 4px;
1446 1474 top: 0;
1447 1475 left: 0;
1448 1476 transform: translate(0%, 0%);
@@ -1503,9 +1531,9 @@
1503 1531 .qcl-openai div#wp-chatbot-openrouter-settings label.form-check-label span.pro-badge {
1504 1532 font-size: 9px;
1505 1533 font-weight: 400;
1506 1534 color: #ffffff;
1507 - background: #5B4E96;
1535 + background: var(--woobot-primary);
1508 1536 border-radius: 20px;
1509 1537 padding: 2px 8px;
1510 1538 margin-left: 5px;
1511 1539 text-transform: uppercase;
@@ -1775,9 +1803,9 @@
1775 1803 margin: 2px 10px;
1776 1804 font-size: 15px;
1777 1805 font-weight: 500;
1778 1806 border: none;
1779 - background: #5b4e96;
1807 + background: var(--woobot-primary);
1780 1808 color: #fff;
1781 1809 padding: 14px 20px !important;
1782 1810 display: flex;
1783 1811 align-items: center;
@@ -1786,20 +1814,20 @@
1786 1814
1787 1815 .content_qcbot_help_secion .panel-default>.panel-heading {
1788 1816 color: #333;
1789 1817 background-color: #f5f5f5;
1790 - border-color: #5B4E96;
1818 + border-color: var(--woobot-primary);
1791 1819 background: #fff !important;
1792 - color: #5B4E96 !important;
1820 + color: var(--woobot-primary) !important;
1793 1821 text-decoration: none !important;
1794 1822 border-radius: 8px;
1795 - border: 2px solid #5B4E96;
1823 + border: 2px solid var(--woobot-primary);
1796 1824 padding: 0;
1797 1825 }
1798 1826
1799 1827
1800 1828 .content_qcbot_help_secion .panel-default>.panel-heading:hover {
1801 - background: #5B4E96 !important;
1829 + background: var(--woobot-primary) !important;
1802 1830 color: #ffffff !important;
1803 1831 text-decoration: none !important;
1804 1832 border-radius: 8px;
1805 1833 }
@@ -1820,9 +1848,9 @@
1820 1848 display: block;
1821 1849 padding: 15px 12px;
1822 1850 font-size: 16px;
1823 1851 font-weight: bold;
1824 - color: #5B4E96;
1852 + color: var(--woobot-primary);
1825 1853 }
1826 1854
1827 1855 .content_qcbot_help_secion p {
1828 1856 font-size: 15px;
@@ -1912,9 +1940,9 @@
1912 1940 display: block;
1913 1941 padding: 15px 12px;
1914 1942 font-size: 16px;
1915 1943 color: #fff;
1916 - background: #5B4E96;
1944 + background: var(--woobot-primary);
1917 1945 width: 100%;
1918 1946 text-align: left;
1919 1947 }
1920 1948
@@ -1942,12 +1970,12 @@
1942 1970 font-size: 16px;
1943 1971 line-height: 1.71428571;
1944 1972 font-weight: 600;
1945 1973 background: #ffffff;
1946 - color: #5b4e96;
1974 + color: var(--woobot-primary);
1947 1975 text-decoration: none;
1948 1976 white-space: nowrap;
1949 - border: 1px solid #5b4e96;
1977 + border: 1px solid var(--woobot-primary);
1950 1978 padding: 14px 20px !important;
1951 1979 line-height: normal !important;
1952 1980 border-radius: 6px;
1953 1981
@@ -1960,13 +1988,13 @@
1960 1988 margin-left: .5em;
1961 1989 font-size: 16px;
1962 1990 line-height: 1.71428571;
1963 1991 font-weight: 600;
1964 - background: #5b4e96;
1992 + background: var(--woobot-primary);
1965 1993 color: #fff;
1966 1994 text-decoration: none;
1967 1995 white-space: nowrap;
1968 - border: 1px solid #5b4e96;
1996 + border: 1px solid var(--woobot-primary);
1969 1997 padding: 14px 20px !important;
1970 1998 line-height: normal !important;
1971 1999
1972 2000 }
@@ -1988,18 +2016,18 @@
1988 2016 padding: 14px 20px;
1989 2017 width: 100%;
1990 2018 font-size: 16px;
1991 2019 font-weight: 500;
1992 - color: #988FBD;
2020 + color: var(--woobot-nav-muted);
1993 2021 border-radius: 8px;
1994 2022 position: relative;
1995 2023 display: flex;
1996 2024 align-items: center;
1997 2025 gap: 15px;
1998 - background: #5B4E96;
2026 + background: var(--woobot-primary);
1999 2027 color: #ffffff;
2000 2028 text-decoration: none;
2001 - border-color: #5b4e96 !important;
2029 + border-color: var(--woobot-primary) !important;
2002 2030 }
2003 2031
2004 2032
2005 2033
@@ -2012,9 +2040,9 @@
2012 2040 .wp-chatbot-language-center-summmery-checkbox input[type=checkbox]+label {
2013 2041 position: relative;
2014 2042 width: 18px;
2015 2043 height: 18px;
2016 - border: 2px solid #5b4e96;
2044 + border: 2px solid var(--woobot-primary);
2017 2045 border-radius: 4px;
2018 2046 top: 0;
2019 2047 left: 0;
2020 2048 transform: translate(0%, 0%);
@@ -2121,9 +2149,9 @@
2121 2149 text-align: center;
2122 2150 display: flex;
2123 2151 align-items: center;
2124 2152 justify-content: center;
2125 - background: #5b4e968f;
2153 + background: color-mix(in srgb, var(--woobot-primary) 56%, transparent);
2126 2154 color: #ffffff;
2127 2155 font-size: 60px;
2128 2156 border-radius: 8px;
2129 2157 }
@@ -2131,9 +2159,9 @@
2131 2159 text-decoration: none !important;
2132 2160 position: relative;
2133 2161 }
2134 2162 .docs_icon span {
2135 - background: #5b4e96;
2163 + background: var(--woobot-primary);
2136 2164 padding: 25px 25px;
2137 2165 border-radius: 50%;
2138 2166 font-size: 82px;
2139 2167 width: auto;
@@ -2167,14 +2195,14 @@
2167 2195
2168 2196 .wp-chatbot-wrap a.nav-tab.sld_click_handle {
2169 2197 margin-right: .5em;
2170 2198 line-height: 1.42857143;
2171 - border: 1px solid #5b4e96 !important;
2199 + border: 1px solid var(--woobot-primary) !important;
2172 2200 border-radius: 6px !important;
2173 - border: 1px solid #5b4e96 !important;
2201 + border: 1px solid var(--woobot-primary) !important;
2174 2202 padding: 10px 20px !important;
2175 2203 border-radius: 8px !important;
2176 - color: #5b4e96 !important;
2204 + color: var(--woobot-primary) !important;
2177 2205 font-size: 15px !important;
2178 2206 font-weight: 600;
2179 2207 line-height: normal !important;
2180 2208 background: #fff;
@@ -2182,11 +2210,11 @@
2182 2210
2183 2211 .wp-chatbot-wrap a.nav-tab.sld_click_handle:hover, .wp-chatbot-wrap a.nav-tab.sld_click_handle.nav-tab-active{
2184 2212 margin-right: .5em;
2185 2213 line-height: 1.42857143;
2186 - border: 1px solid #5b4e96 !important;
2214 + border: 1px solid var(--woobot-primary) !important;
2187 2215 border-radius: 6px !important;
2188 - border: 1px solid #5b4e96 !important;
2216 + border: 1px solid var(--woobot-primary) !important;
2189 2217 padding: 10px 20px !important;
2190 2218 border-radius: 8px !important;
2191 2219 color: #fff !important;
2192 2220 font-size: 15px !important;
@@ -2191,9 +2219,9 @@
2191 2219 color: #fff !important;
2192 2220 font-size: 15px !important;
2193 2221 font-weight: 600;
2194 2222 line-height: normal !important;
2195 - background: #5b4e96;
2223 + background: var(--woobot-primary);
2196 2224 }
2197 2225
2198 2226
2199 2227
@@ -2223,9 +2251,9 @@
2223 2251 padding: 14px 20px;
2224 2252 width: auto;
2225 2253 font-size: 16px;
2226 2254 font-weight: 500;
2227 - color: #988FBD;
2255 + color: var(--woobot-nav-muted);
2228 2256 border-radius: 8px;
2229 2257 position: relative;
2230 2258 display: flex;
2231 2259 align-items: center;
@@ -2232,9 +2260,9 @@
2232 2260 gap: 15px;
2233 2261 background: #d14529;
2234 2262 color: #ffffff;
2235 2263 text-decoration: none;
2236 - border-color: #5b4e96 !important;
2264 + border-color: var(--woobot-primary) !important;
2237 2265 }
2238 2266
2239 2267
2240 2268 button.swal2-confirm.btn.btn-lg.swal2-styled {
@@ -2244,9 +2272,9 @@
2244 2272 .chatbot-wpbot-lite_page_wpbot button.swal2-deny.swal2-styled {
2245 2273 display: none !important;
2246 2274 }
2247 2275 a#qcld_save_openrouter_setting {
2248 - background: #5B4E96;
2276 + background: var(--woobot-primary);
2249 2277 color: #ffffff;
2250 2278 border: none;
2251 2279 padding: 12px 30px;
2252 2280 }
@@ -2251,9 +2279,9 @@
2251 2279 padding: 12px 30px;
2252 2280 }
2253 2281
2254 2282 a#save_setting {
2255 - background: #5B4E96;
2283 + background: var(--woobot-primary);
2256 2284 color: #ffffff;
2257 2285 border: none;
2258 2286 padding: 12px 30px;
2259 2287 }
@@ -2373,12 +2401,12 @@
2373 2401 width: auto;
2374 2402 font-size: 16px;
2375 2403 align-items: center;
2376 2404 gap: 15px;
2377 - background: #5B4E96;
2405 + background: var(--woobot-primary);
2378 2406 color: #ffffff;
2379 2407 text-decoration: none;
2380 - border-color: #5b4e96 !important;
2408 + border-color: var(--woobot-primary) !important;
2381 2409 }
2382 2410
2383 2411 .wrap.qcld-main-wrapper a:focus {
2384 2412 outline: none !important;
@@ -2392,9 +2420,9 @@
2392 2420
2393 2421
2394 2422 .qcld-general-settings-connection-notic {
2395 2423 background: #eee;
2396 - border: 2px solid #5b4e96;
2424 + border: 2px solid var(--woobot-primary);
2397 2425 border-radius: 8px;
2398 2426 margin: 0 0 15px 0;
2399 2427 padding: 12px;
2400 2428 background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
@@ -2415,9 +2443,9 @@
2415 2443 transition: all 200ms;
2416 2444 font-size: 30px;
2417 2445 font-weight: bold;
2418 2446 text-decoration: none;
2419 - color: #5b4e96;
2447 + color: var(--woobot-primary);
2420 2448 }
2421 2449 .qcld-general-settings-close:hover {
2422 2450 color: orange;
2423 2451 }
@@ -2454,9 +2482,9 @@
2454 2482
2455 2483 #qcld-show-more-wrapper-box .qcld-show-more-show-more i {
2456 2484 display: block;
2457 2485 padding: 0 0 0 0;
2458 - background: #5b4e96;
2486 + background: var(--woobot-primary);
2459 2487 width: 30px;
2460 2488 height: 30px;
2461 2489 line-height: 30px;
2462 2490 border-radius: 50%;
@@ -2468,9 +2496,9 @@
2468 2496 .qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]+label {
2469 2497 position: relative;
2470 2498 width: 18px;
2471 2499 height: 18px;
2472 - border: 2px solid #5b4e96;
2500 + border: 2px solid var(--woobot-primary);
2473 2501 border-radius: 4px;
2474 2502 top: 0;
2475 2503 left: 0;
2476 2504 transform: translate(0%, 0%);
@@ -2532,9 +2560,9 @@
2532 2560 .qcl-openai div#wp-chatbot-gemini-settings label.form-check-label span.pro-badge {
2533 2561 font-size: 9px;
2534 2562 font-weight: 400;
2535 2563 color: #ffffff;
2536 - background: #5B4E96;
2564 + background: var(--woobot-primary);
2537 2565 border-radius: 20px;
2538 2566 padding: 2px 8px;
2539 2567 margin-left: 5px;
2540 2568 text-transform: uppercase;
@@ -2626,9 +2654,9 @@
2626 2654 font-weight: bold;
2627 2655 }
2628 2656
2629 2657 a#qcld_save_gemini_setting {
2630 - background: #5B4E96;
2658 + background: var(--woobot-primary);
2631 2659 color: #ffffff;
2632 2660 border: none;
2633 2661 padding: 12px 30px;
2634 2662 }
@@ -2667,9 +2695,9 @@
2667 2695 }
2668 2696
2669 2697 .wp-chatbot-wrap .qc-opt-language-title{
2670 2698 font-weight: bold !important;
2671 - color: #5b4e96 !important;
2699 + color: var(--woobot-primary) !important;
2672 2700 font-size: 16px;
2673 2701 }
2674 2702
2675 2703 button.qcld_chatbot_custom_icon_button.button, button.wp_chatbot_custom_agent_button.button {
@@ -2676,22 +2704,22 @@
2676 2704 padding: 2px 20px;
2677 2705 width: auto;
2678 2706 font-size: 14px;
2679 2707 font-weight: 500;
2680 - color: #988FBD;
2708 + color: var(--woobot-nav-muted);
2681 2709 border-radius: 8px;
2682 2710 background: #fff;
2683 - color: #5B4E96;
2711 + color: var(--woobot-primary);
2684 2712 text-decoration: none;
2685 2713 margin: 0;
2686 - border: 2px solid #5B4E96;
2714 + border: 2px solid var(--woobot-primary);
2687 2715
2688 2716 }
2689 2717
2690 2718 button.qcld_chatbot_custom_icon_button.button:hover, button.wp_chatbot_custom_agent_button.button:hover {
2691 - background: #5B4E96;
2719 + background: var(--woobot-primary);
2692 2720 color: #fff;
2693 - border: 2px solid #5B4E96;
2721 + border: 2px solid var(--woobot-primary);
2694 2722
2695 2723 }
2696 2724
2697 2725
@@ -2757,18 +2785,18 @@
2757 2785 padding: 14px 30px;
2758 2786 width: auto;
2759 2787 font-size: 16px;
2760 2788 font-weight: 500;
2761 - color: #988FBD;
2789 + color: var(--woobot-nav-muted);
2762 2790 border-radius: 8px;
2763 2791 position: relative;
2764 2792 display: inline-block;
2765 2793 align-items: center;
2766 2794 gap: 15px;
2767 - background: #5B4E96;
2795 + background: var(--woobot-primary);
2768 2796 color: #ffffff;
2769 2797 text-decoration: none;
2770 - border-color: #5b4e96 !important;
2798 + border-color: var(--woobot-primary) !important;
2771 2799 line-height: normal;
2772 2800 }
2773 2801 div#wpfooter {
2774 2802 display: none;
@@ -2783,9 +2811,9 @@
2783 2811 padding: 0 0 8px 0;
2784 2812 margin: 20px 0 12px 0;
2785 2813 font-weight: bold;
2786 2814 font-size: 22px !important;
2787 - color: #5b4e96 !important;
2815 + color: var(--woobot-primary) !important;
2788 2816 }
2789 2817
2790 2818 div#rag-sync .wrap h3 {
2791 2819 padding: 0 0 8px 0;
@@ -2791,20 +2819,20 @@
2791 2819 padding: 0 0 8px 0;
2792 2820 margin: 10px 0 12px 0;
2793 2821 font-weight: bold;
2794 2822 font-size: 22px !important;
2795 - color: #5b4e96 !important;
2823 + color: var(--woobot-primary) !important;
2796 2824 }
2797 2825
2798 2826 div#rag-settings h2.nav-tab-wrapper a {
2799 2827 margin-right: 0;
2800 2828 line-height: 1.42857143;
2801 - border: 1px solid #5b4e96;
2829 + border: 1px solid var(--woobot-primary);
2802 2830 border-radius: 6px;
2803 - border: 1px solid #5b4e96;
2831 + border: 1px solid var(--woobot-primary);
2804 2832 padding: 10px 20px !important;
2805 2833 border-radius: 8px;
2806 - color: #5b4e96;
2834 + color: var(--woobot-primary);
2807 2835 font-size: 15px;
2808 2836 font-weight: 600;
2809 2837 line-height: normal !important;
2810 2838 background: #fff;
@@ -2817,11 +2845,11 @@
2817 2845 }
2818 2846
2819 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 {
2820 2848 color: #fff;
2821 - background: #5b4e96;
2849 + background: var(--woobot-primary);
2822 2850 text-decoration: none !important;
2823 - border: 1px solid #5b4e96;
2851 + border: 1px solid var(--woobot-primary);
2824 2852 }
2825 2853
2826 2854
2827 2855
@@ -2829,18 +2857,18 @@
2829 2857 padding: 8px 15px;
2830 2858 width: auto;
2831 2859 font-size: 16px;
2832 2860 font-weight: 500;
2833 - color: #988FBD;
2861 + color: var(--woobot-nav-muted);
2834 2862 border-radius: 8px;
2835 2863 position: relative;
2836 2864 display: inline-block;
2837 2865 align-items: center;
2838 2866 gap: 15px;
2839 - background: #5B4E96;
2867 + background: var(--woobot-primary);
2840 2868 color: #ffffff;
2841 2869 text-decoration: none;
2842 - border-color: #5b4e96 !important;
2870 + border-color: var(--woobot-primary) !important;
2843 2871 line-height: normal;
2844 2872 }
2845 2873
2846 2874 div#rag-sync .wrap {
@@ -2866,10 +2894,10 @@
2866 2894 text-align: right;
2867 2895 padding: 8px 0;
2868 2896 }
2869 2897 button#botmaster_submit_sitemap_btn {
2870 - background: #5B4E96;
2871 - border-color: #5B4E96;
2898 + background: var(--woobot-primary);
2899 + border-color: var(--woobot-primary);
2872 2900 }
2873 2901 div#rag-database h3 {
2874 2902 padding: 0 0 8px 0;
2875 2903 margin: 15px 0 8px 0;
@@ -2874,18 +2902,18 @@
2874 2902 padding: 0 0 8px 0;
2875 2903 margin: 15px 0 8px 0;
2876 2904 font-weight: bold;
2877 2905 font-size: 22px !important;
2878 - color: #5b4e96 !important;
2906 + color: var(--woobot-primary) !important;
2879 2907 }
2880 2908
2881 2909 .qcl-openai div#rag-settings h2.nav-tab-wrapper a:focus {
2882 - border: 1px solid #5b4e96 !important;
2910 + border: 1px solid var(--woobot-primary) !important;
2883 2911 }
2884 2912 button#rag-delete-all {
2885 - background: #5b4e96;
2913 + background: var(--woobot-primary);
2886 2914 color: #fff;
2887 - border-color: #5b4e96;
2915 + border-color: var(--woobot-primary);
2888 2916 }
2889 2917
2890 2918 div#rag-database table.widefat {
2891 2919 border: 1px solid #ffffff;
@@ -2895,9 +2923,9 @@
2895 2923 border-bottom: 1px solid #ffffff;
2896 2924 }
2897 2925
2898 2926 div#rag-database table.widefat thead {
2899 - background: #5b4e96;
2927 + background: var(--woobot-primary);
2900 2928 color: #fff;
2901 2929 }
2902 2930 div#rag-database table.widefat thead th {
2903 2931 color: #fff;
@@ -2916,11 +2944,11 @@
2916 2944 div#qcld-rag-settings-tab .wrap .mb-3 {
2917 2945 padding: 5px 0;
2918 2946 }
2919 2947 div#rag-database input#search-submit {
2920 - background: #5b4e96;
2948 + background: var(--woobot-primary);
2921 2949 color: #fff;
2922 - border-color: #5b4e96;
2950 + border-color: var(--woobot-primary);
2923 2951 }
2924 2952 .rag_embed_cpts_wrapper {
2925 2953 display: flex;
2926 2954 flex-direction: column;
@@ -2930,15 +2958,15 @@
2930 2958 display: flex;
2931 2959 gap: 10px;
2932 2960 }
2933 2961 div#wp-chatbot-grok-settings a#qcld_save_grok_setting {
2934 - background: #5B4E96;
2962 + background: var(--woobot-primary);
2935 2963 color: #ffffff;
2936 2964 border: none;
2937 2965 padding: 12px 30px;
2938 2966 }
2939 2967 button#qcld_gemini_fetch_models {
2940 - background: #5B4E96;
2968 + background: var(--woobot-primary);
2941 2969 color: #ffffff;
2942 2970 border: none;
2943 2971 }
2944 2972 .wp-chatbot-wrap label.block.text-sm.font-medium.text-gray-700.mb-2.qc-opt-language-title {
@@ -2951,14 +2979,14 @@
2951 2979 padding: 0 4px;
2952 2980 min-width: 220px;
2953 2981 }
2954 2982 select#qcld_language_center_select:focus {
2955 - border-color: #5b4e96;
2956 - color: #5b4e96;
2957 - 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);
2958 2986 }
2959 2987 div#common-ai-settings h2 a {
2960 - background: #5B4E96;
2988 + background: var(--woobot-primary);
2961 2989 color: #ffffff;
2962 2990 display: inline-block !important;
2963 2991 font-size: 16px;
2964 2992 padding: 8px 15px;
@@ -2989,23 +3017,23 @@
2989 3017 padding: 8px 15px;
2990 3018 width: auto;
2991 3019 font-size: 16px;
2992 3020 font-weight: 500;
2993 - color: #988FBD;
3021 + color: var(--woobot-nav-muted);
2994 3022 border-radius: 8px;
2995 3023 position: relative;
2996 3024 display: inline-block;
2997 3025 align-items: center;
2998 3026 gap: 15px;
2999 - background: #5B4E96;
3027 + background: var(--woobot-primary);
3000 3028 color: #ffffff;
3001 3029 text-decoration: none;
3002 - border-color: #5b4e96 !important;
3030 + border-color: var(--woobot-primary) !important;
3003 3031 line-height: normal;
3004 3032 }
3005 3033 button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
3006 - background: #5B4E96;
3007 - border-color: #5B4E96;
3034 + background: var(--woobot-primary);
3035 + border-color: var(--woobot-primary);
3008 3036 }
3009 3037 .wpbot-wizard-field select#wizard_ai_provider {
3010 3038 background: transparent;
3011 3039 color: #fff;
@@ -3013,11 +3041,11 @@
3013 3041 display: block;
3014 3042 max-width: unset;
3015 3043 }
3016 3044 .wpbot-wizard-field select#wizard_ai_provider:hover {
3017 - border-color: #5b4e96;
3018 - color: #5b4e96;
3019 - 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);
3020 3048 }
3021 3049 div#wizard_api_key_container input#wizard_api_key {
3022 3050 background: transparent;
3023 3051 color: #fff;
@@ -3022,9 +3050,9 @@
3022 3050 background: transparent;
3023 3051 color: #fff;
3024 3052 }
3025 3053 div#collapseTwoControl input[type=radio]:checked::before {
3026 - background-color: #5b4e96;
3054 + background-color: var(--woobot-primary);
3027 3055 }
3028 3056 .nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
3029 3057 width: 320px !important;
3030 3058 gap: 0;
@@ -3053,9 +3081,9 @@
3053 3081 transform: scale(1);
3054 3082 }
3055 3083 }
3056 3084 footer.wp-chatbot-admin-footer input#submit {
3057 - background: #5b4e96;
3085 + background: var(--woobot-primary);
3058 3086 padding: 12px 30px;
3059 3087 }
3060 3088 footer.wp-chatbot-admin-footer {
3061 3089 padding: 0 20px 20px 20px;
@@ -3063,10 +3091,10 @@
3063 3091 }
3064 3092 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
3065 3093 padding: 8px 15px;
3066 3094 background: #ffffff;
3067 - color: #5B4E96;
3068 - border: 2px solid #5B4E96;
3095 + color: var(--woobot-primary);
3096 + border: 2px solid var(--woobot-primary);
3069 3097 border-radius: 6px;
3070 3098 font-weight: bold;
3071 3099 position: absolute;
3072 3100 top: 30px;
@@ -3075,11 +3103,11 @@
3075 3103 min-height: unset;
3076 3104 }
3077 3105 .qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
3078 3106 padding: 8px 15px;
3079 - background: #5B4E96;
3107 + background: var(--woobot-primary);
3080 3108 color: #fff;
3081 - border: 2px solid #5B4E96;
3109 + border: 2px solid var(--woobot-primary);
3082 3110 border-radius: 6px;
3083 3111 font-weight: bold;
3084 3112 position: absolute;
3085 3113 top: 31px;
@@ -3085,9 +3113,9 @@
3085 3113 top: 31px;
3086 3114 left: 280px;
3087 3115 }
3088 3116 .qcld-session-history_menu_box .btn.btn-primary {
3089 - background: #564a8e !important;
3117 + background: var(--woobot-primary) !important;
3090 3118 color: #fff !important;
3091 3119 }
3092 3120 .qcld-session-history_menu_box a.btn.btn-success {
3093 3121 padding: 8px 24px;
@@ -3096,12 +3124,12 @@
3096 3124 font-weight: 500;
3097 3125 border-radius: 8px;
3098 3126 position: relative;
3099 3127 background: #ffffff;
3100 - color: #564a8e;
3128 + color: var(--woobot-primary);
3101 3129 text-decoration: none;
3102 3130 line-height: normal;
3103 - border: 2px solid #564a8e;
3131 + border: 2px solid var(--woobot-primary);
3104 3132 }
3105 3133 .qcld-session-history_menu_box a.btn.btn-success:hover {
3106 3134 padding: 8px 24px;
3107 3135 width: auto;
@@ -3108,13 +3136,13 @@
3108 3136 font-size: 15px;
3109 3137 font-weight: 500;
3110 3138 border-radius: 8px;
3111 3139 position: relative;
3112 - background: #564a8e;
3140 + background: var(--woobot-primary);
3113 3141 color: #fff;
3114 3142 text-decoration: none;
3115 3143 line-height: normal;
3116 - border: 2px solid #564a8e;
3144 + border: 2px solid var(--woobot-primary);
3117 3145 }
3118 3146 .Expandmore {
3119 3147 background: #23ab10;
3120 3148 display: inline-block;
@@ -3147,9 +3175,9 @@
3147 3175 .avatar-location-wrapper {
3148 3176 padding: 0 0 25px 0;
3149 3177 }
3150 3178 .avatar-location-card.active {
3151 - background: #5b4e96;
3179 + background: var(--woobot-primary);
3152 3180 color: #ffffff;
3153 3181 }
3154 3182 .avatar-location-card.active svg {
3155 3183 color: #ffffff;
@@ -3176,7 +3204,578 @@
3176 3204 width: 410px;
3177 3205 }
3178 3206 .ai-provider-cards-wrapper {
3179 3207 display: flex;
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 + }
3180 3779 }
3181 3780
3182 3781