← All changes | css/admin-style.css +124 -1411 8.7.8 → 7.5.7 View file →

		@@ -1,36 +1,8 @@
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		-
19	3	.qcld-main-wrapper {
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);
	4	+ background-color: #F5F7FD;
33	5	font-family: "DM Sans", sans-serif !important;
34	6	font-optical-sizing: auto;
35	7	font-size: 16px;
36	8	font-weight: normal;
		@@ -39,11 +11,11 @@
39	11	.wp-chatbot-wrap .fa{
40	12	font: normal normal normal 14px / 1 FontAwesome !important;
41	13	}
42	14
43		-/* .chatbot-wpbot-lite_page_wpbot, .chatbot-wpbot-lite_page_wpbot_help_page, .chatbot-wpbot-lite_page_wpbot_openAi, .toplevel_page_wpbot-panel{
44		- background-color: var(--woobot-page-bg);
45		-} */
	15	+.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;
	17	+}
46	18
47	19	.qcld-main-wrapper .h1,
48	20	.qcld-main-wrapper .h2,
49	21	.qcld-main-wrapper .h3,
		@@ -55,9 +27,9 @@
55	27	.qcld-main-wrapper h3,
56	28	.qcld-main-wrapper h4,
57	29	.qcld-main-wrapper h5,
58	30	.qcld-main-wrapper h6 {
59		- color: var(--woobot-primary) !important;
	31	+ color: #5b4e96 !important;
60	32	}
61	33
62	34	.qcld-wp-chatbot-wrap-header {
63	35	display: flex;
		@@ -84,10 +56,10 @@
84	56
85	57	.qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade {
86	58	padding: 12px 25px;
87	59	background: #ffffff;
88		- color: var(--woobot-primary);
89		- border: 2px solid var(--woobot-primary);
	60	+ color: #5B4E96;
	61	+ border: 2px solid #5B4E96;
90	62	border-radius: 6px;
91	63	font-weight: bold;
92	64	}
93	65
		@@ -92,11 +64,11 @@
92	64	}
93	65
94	66	.qcld-wp-chatbot-wrap-header a.wpchatbot-Upgrade:hover {
95	67	padding: 12px 25px;
96		- background: var(--woobot-primary);
	68	+ background: #5B4E96;
97	69	color: #fff;
98		- border: 2px solid var(--woobot-primary);
	70	+ border: 2px solid #5B4E96;
99	71	border-radius: 6px;
100	72	font-weight: bold;
101	73	text-decoration: none;
102	74	}
		@@ -131,15 +103,15 @@
131	103	}
132	104
133	105
134	106	.wp-chatbot-tabs nav ul li.tab-current a {
135		- background: var(--woobot-primary);
	107	+ background: #5B4E96;
136	108	color: #ffffff;
137	109	text-decoration: none;
138	110	}
139	111
140	112	.wp-chatbot-tabs nav ul li a:hover {
141		- background: var(--woobot-primary);
	113	+ background: #5B4E96;
142	114	color: #ffffff;
143	115	text-decoration: none;
144	116	}
145	117
		@@ -147,9 +119,9 @@
147	119	padding: 14px 15px;
148	120	width: 100%;
149	121	font-size: 16px;
150	122	font-weight: 500;
151		- color: var(--woobot-nav-muted);
	123	+ color: #988FBD;
152	124	border-radius: 8px;
153	125	position: relative;
154	126	display: flex;
155	127	align-items: center;
		@@ -173,9 +145,9 @@
173	145	padding: 14px 15px;
174	146	width: 100%;
175	147	font-size: 16px;
176	148	font-weight: 500;
177		- color: var(--woobot-nav-muted);
	149	+ color: #988FBD;
178	150	border-radius: 8px;
179	151	position: relative;
180	152	display: flex;
181	153	align-items: center;
		@@ -195,9 +167,9 @@
195	167	font-size: 18px;
196	168	}
197	169
198	170	.wp-chatbot-tabs nav .cxsc-settings_openai_border a:hover {
199		- background: var(--woobot-primary);
	171	+ background: #5B4E96;
200	172	color: #ffffff;
201	173	text-decoration: none;
202	174	}
203	175
		@@ -230,9 +202,9 @@
230	202	max-width: 18px;
231	203	}
232	204
233	205	a.wp-chatbot-admin-pro-upgrade-button {
234		- background: var(--woobot-primary);
	206	+ background: #5B4E96;
235	207	color: #ffffff;
236	208	text-decoration: none;
237	209	padding: 4px 20px;
238	210	border-radius: 6px;
		@@ -271,15 +243,15 @@
271	243	padding: 14px 20px;
272	244	width: auto;
273	245	font-size: 16px;
274	246	font-weight: 500;
275		- color: var(--woobot-nav-muted);
	247	+ color: #988FBD;
276	248	border-radius: 8px;
277	249	position: relative;
278	250	display: flex;
279	251	align-items: center;
280	252	gap: 15px;
281		- background: var(--woobot-primary);
	253	+ background: #5B4E96;
282	254	color: #ffffff;
283	255	text-decoration: none;
284	256	margin: 0 0 10px 15px;
285	257	}
		@@ -308,12 +280,12 @@
308	280	font-size: 14px;
309	281	line-height: 1.71428571;
310	282	font-weight: 600;
311	283	background: #ffffff;
312		- color: var(--woobot-primary);
	284	+ color: #5b4e96;
313	285	text-decoration: none;
314	286	white-space: nowrap;
315		- border: 1px solid var(--woobot-primary);
	287	+ border: 1px solid #5b4e96;
316	288	padding: 10px 20px !important;
317	289	border-radius: 8px;
318	290	line-height: normal !important;
319	291	text-decoration: none;
		@@ -322,16 +294,16 @@
322	294	.qcld-main-wrapper .nav-tab-active,
323	295	.qcld-main-wrapper .nav-tab-active:focus,
324	296	.qcld-main-wrapper .nav-tab-active:focus:active,
325	297	.qcld-main-wrapper .nav-tab-active:hover {
326		- border-bottom: 1px solid var(--woobot-primary);
327		- background: var(--woobot-primary);
	298	+ border-bottom: 1px solid #5b4e96;
	299	+ background: #5b4e96;
328	300	color: #fff;
329	301	text-decoration: none;
330	302	}
331	303
332	304	.qcld-main-wrapper .btn-primary {
333		- border-color: var(--woobot-primary) !important;
	305	+ border-color: #5b4e96 !important;
334	306	}
335	307
336	308	.qcld-main-wrapper ul.feature-list li img {
337	309	max-width: 16px;
		@@ -350,12 +322,12 @@
350	322
351	323
352	324	section.wp-chatbot-tab-container-inner .panel-default>.panel-heading {
353	325	background: #fff !important;
354		- color: var(--woobot-primary) !important;
	326	+ color: #5B4E96 !important;
355	327	text-decoration: none !important;
356	328	border-radius: 8px;
357		- border: 2px solid var(--woobot-primary);
	329	+ border: 2px solid #5B4E96;
358	330	}
359	331
360	332	section.wp-chatbot-tab-container-inner .panel-default>.panel-heading+.panel-collapse>.panel-body {
361	333	border-top-color: #ddd;
		@@ -365,9 +337,9 @@
365	337	margin: 15px 0 0 0;
366	338	}
367	339
368	340	section.wp-chatbot-tab-container-inner .panel-default>.panel-heading:hover {
369		- background: var(--woobot-primary) !important;
	341	+ background: #5B4E96 !important;
370	342	color: #ffffff !important;
371	343	text-decoration: none !important;
372	344	border-radius: 8px;
373	345	}
		@@ -452,14 +424,14 @@
452	424
453	425	.wp-chatbot-wrap .nav-tabs>li>a {
454	426	margin-right: .5em;
455	427	line-height: 1.42857143;
456		- border: 1px solid var(--woobot-primary);
	428	+ border: 1px solid #5b4e96;
457	429	border-radius: 6px;
458		- border: 1px solid var(--woobot-primary);
	430	+ border: 1px solid #5b4e96;
459	431	padding: 10px 20px !important;
460	432	border-radius: 8px;
461		- color: var(--woobot-primary);
	433	+ color: #5b4e96;
462	434	font-size: 15px;
463	435	font-weight: 600;
464	436	line-height: normal !important;
465	437	}
		@@ -468,10 +440,10 @@
468	440	.wp-chatbot-wrap .nav-tabs>li.active>a:focus,
469	441	.wp-chatbot-wrap .nav-tabs>li.active>a:hover {
470	442	color: #ffffff;
471	443	cursor: default;
472		- background-color: var(--woobot-primary);
473		- border: 1px solid var(--woobot-primary);
	444	+ background-color: #5b4e96;
	445	+ border: 1px solid #5b4e96;
474	446	border-bottom-color: transparent;
475	447	}
476	448
477	449	.wp-chatbot-wrap .nav-tabs {
		@@ -481,22 +453,22 @@
481	453
482	454	.wp-chatbot-wrap .nav>li>a:focus,
483	455	.wp-chatbot-wrap .nav>li>a:hover {
484	456	text-decoration: none;
485		- background-color: var(--woobot-primary);
486		- border-color: var(--woobot-primary) #eee #ddd;
	457	+ background-color: #5b4e96;
	458	+ border-color: #5b4e96 #eee #ddd;
487	459	color: #fff;
488	460	}
489	461
490	462
491	463	.cxsc-settings-blocks.cxsc-settings-faq-blocks {
492		- background: var(--woobot-page-bg) !important;
	464	+ background: #f5f7fd !important;
493	465	padding: 12px !important;
494	466	border-radius: 6px;
495	467	}
496	468
497	469	.qcld-faq-block .cxsc-settings-blocks {
498		- background: var(--woobot-page-bg) !important;
	470	+ background: #f5f7fd !important;
499	471	padding: 12px !important;
500	472	border-radius: 6px !important;
501	473	margin: 0 0 15px 0 !important;
502	474	}
		@@ -533,9 +505,9 @@
533	505	border-radius: 0;
534	506	width: 100%;
535	507	height: 100%;
536	508	margin: 0;
537		- background-color: color-mix(in srgb, var(--woobot-primary) 74%, transparent) !important;
	509	+ background-color: #5b4e96bd !important;
538	510	line-height: 1.14285714;
539	511	position: absolute;
540	512	top: 0;
541	513	left: 0;
		@@ -644,12 +616,12 @@
644	616	object-fit: cover;
645	617	}
646	618
647	619	.wpbot_single_addon a.button.button-secondary {
648		- background: var(--woobot-primary);
	620	+ background: #5B4E96;
649	621	color: #ffffff;
650	622	text-decoration: none;
651		- border: 1px solid var(--woobot-primary);
	623	+ border: 1px solid #5B4E96;
652	624	}
653	625
654	626	.wp-chatbot-wrap .wpbot_single_addon p {
655	627	font-size: 14px;
		@@ -735,11 +707,11 @@
735	707	}
736	708
737	709
738	710	.qcld-wp-chatbot-wrap-header-doc-details a {
739		- border: 2px solid var(--woobot-primary);
	711	+ border: 2px solid #5b4e96;
740	712	background: #fff;
741		- color: var(--woobot-primary);
	713	+ color: #5b4e96;
742	714	padding: 8px 20px;
743	715	border-radius: 8px;
744	716	display: inline-block;
745	717	margin: 4px 0 0 0;
		@@ -745,10 +717,10 @@
745	717	margin: 4px 0 0 0;
746	718	}
747	719
748	720	.qcld-wp-chatbot-wrap-header-doc-details a:hover {
749		- border: 2px solid var(--woobot-primary);
750		- background: var(--woobot-primary);
	721	+ border: 2px solid #5b4e96;
	722	+ background: #5b4e96;
751	723	color: #fff;
752	724	padding: 8px 20px;
753	725	border-radius: 8px;
754	726	display: inline-block;
		@@ -789,9 +761,9 @@
789	761	display: block;
790	762	display: flex !important;
791	763	align-items: center;
792	764	gap: 8px;
793		- background: var(--woobot-primary);
	765	+ background: #5B4E96;
794	766	padding: 10px 25px !important;
795	767	border-radius: 8px;
796	768	width: 100%;
797	769	justify-content: center;
		@@ -835,15 +807,15 @@
835	807	padding: 14px 20px;
836	808	width: auto;
837	809	font-size: 16px;
838	810	font-weight: 500;
839		- color: var(--woobot-nav-muted);
	811	+ color: #988FBD;
840	812	border-radius: 8px;
841	813	position: relative;
842	814	display: inline-block;
843	815	align-items: center;
844	816	gap: 15px;
845		- background: var(--woobot-primary);
	817	+ background: #5B4E96;
846	818	color: #ffffff;
847	819	text-decoration: none;
848	820	}
849	821
		@@ -972,9 +944,9 @@
972	944	padding: 12px;
973	945	}
974	946
975	947	.qc_menu_area_box ul li span {
976		- background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
	948	+ background-image: linear-gradient(to right, #868afa 0%, #5b4e96 51%, #5b4e96 100%);
977	949	box-shadow: 0 5px 15px #c3c3c3;
978	950	border: 1px solid #ffffff;
979	951	color: #fff;
980	952	display: block;
		@@ -982,9 +954,9 @@
982	954	padding: 12px 30px;
983	955	}
984	956
985	957	.qc_menu_area_box .qc_menu_area_container span {
986		- background-image: linear-gradient(to right, #868afa 0%, var(--woobot-primary) 51%, var(--woobot-primary) 100%);
	958	+ background-image: linear-gradient(to right, #868afa 0%, #5b4e96 51%, #5b4e96 100%);
987	959	box-shadow: 0 5px 15px #c3c3c3;
988	960	border: 1px solid #ffffff;
989	961	color: #fff;
990	962	display: block;
		@@ -993,9 +965,9 @@
993	965	}
994	966
995	967	.qc_menu_area_box .qc_menu_area_container span:hover,
996	968	.qc_menu_area_box ul li span:hover {
997		- background-image: linear-gradient(to right, var(--woobot-primary) 0%, #868afa 51%, #868afa 100%);
	969	+ background-image: linear-gradient(to right, #5b4e96 0%, #868afa 51%, #868afa 100%);
998	970	}
999	971
1000	972	.qc_menu_list_container {
1001	973	position: relative;
		@@ -1024,59 +996,8 @@
1024	996	.lp-submenu-wpbot_openAi .swal2-actions {
1025	997	display: flex;
1026	998	width: auto;
1027	999	}
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		-}
1079	1000	.lp-submenu-wpbot_openAi button.swal2-confirm.btn.btn-lg.swal2-styled{
1080	1001	width: auto !important;
1081	1002	}
1082	1003
		@@ -1097,9 +1018,9 @@
1097	1018	.wp-chatbot-wrap .form-group input[type=checkbox]+label {
1098	1019	position: relative;
1099	1020	width: 18px;
1100	1021	height: 18px;
1101		- border: 2px solid var(--woobot-primary);
	1022	+ border: 2px solid #5b4e96;
1102	1023	border-radius: 4px;
1103	1024	top: 0;
1104	1025	left: 0;
1105	1026	transform: translate(0%, 0%);
		@@ -1168,9 +1089,9 @@
1168	1089	padding: 0;
1169	1090	display: flex;
1170	1091	flex-direction: column;
1171	1092	align-content: flex-start;
1172		- border: 15px solid var(--woobot-page-bg);
	1093	+ border: 15px solid #f5f7fd;
1173	1094	border-radius: 16px;
1174	1095	min-height: 480px;
1175	1096	}
1176	1097
		@@ -1191,13 +1112,12 @@
1191	1112
1192	1113	.admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
1193	1114	display: flex;
1194	1115	justify-content: flex-start;
1195		- padding: 8px 20px;
	1116	+ padding: 20px;
1196	1117	border-radius: 16px;
1197	1118	background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
1198		- margin: 20px 0 0 0;
1199		- gap: 30px;
	1119	+ margin: 20px 0 20px 0;
1200	1120	}
1201	1121
1202	1122	.admin-maxwith.qcld-openai-main-box .tab-content {
1203	1123	padding: 0 12px 0 12px;
		@@ -1211,12 +1131,12 @@
1211	1131	padding: 0;
1212	1132	border: none;
1213	1133	box-shadow: none;
1214	1134	background: #fff !important;
1215		- color: var(--woobot-primary) !important;
	1135	+ color: #5B4E96 !important;
1216	1136	text-decoration: none !important;
1217	1137	border-radius: 8px;
1218		- border: 2px solid var(--woobot-primary);
	1138	+ border: 2px solid #5B4E96;
1219	1139	}
1220	1140
1221	1141	.admin-maxwith.qcld-openai-main-box div#qcldopenaiaccordion .card h2 {
1222	1142	margin: 0;
		@@ -1228,9 +1148,9 @@
1228	1148	font-weight: bold;
1229	1149	display: block;
1230	1150	padding: 15px 12px;
1231	1151	font-size: 16px;
1232		- color: var(--woobot-primary);
	1152	+ color: #5B4E96;
1233	1153	width: 100%;
1234	1154	text-align: left;
1235	1155	}
1236	1156
		@@ -1280,16 +1200,18 @@
1280	1200	font-size: 15px;
1281	1201	}
1282	1202
1283	1203	.admin-maxwith.qcld-openai-main-box .tab-content .alert.alert-info {
1284		- margin: 15px 0 0 0;
	1204	+ margin: 15px 0 0 15px;
1285	1205	}
	1206	+
	1207	+
1286	1208	.admin-maxwith.qcld-openai-main-box ul.nav.nav-tabs li a {
1287	1209	padding: 14px 20px;
1288	1210	width: 100%;
1289	1211	font-size: 16px;
1290	1212	font-weight: 500;
1291		- color: var(--woobot-nav-muted);
	1213	+ color: #988FBD;
1292	1214	border-radius: 8px;
1293	1215	position: relative;
1294	1216	display: flex;
1295	1217	align-items: center;
		@@ -1305,15 +1227,15 @@
1305	1227	padding: 14px 20px;
1306	1228	width: 100%;
1307	1229	font-size: 16px;
1308	1230	font-weight: 500;
1309		- color: var(--woobot-nav-muted);
	1231	+ color: #988FBD;
1310	1232	border-radius: 8px;
1311	1233	position: relative;
1312	1234	display: flex;
1313	1235	align-items: center;
1314	1236	gap: 15px;
1315		- background: var(--woobot-primary);
	1237	+ background: #5B4E96;
1316	1238	color: #ffffff;
1317	1239	text-decoration: none;
1318	1240	border: none;
1319	1241	margin: 2px 0;
		@@ -1324,9 +1246,9 @@
1324	1246	.wp-chatbot-wrap div#wp-chatbot-exclude-post-list input[type=checkbox]+label {
1325	1247	position: relative;
1326	1248	width: 18px;
1327	1249	height: 18px;
1328		- border: 2px solid var(--woobot-primary);
	1250	+ border: 2px solid #5b4e96;
1329	1251	border-radius: 4px;
1330	1252	top: 0;
1331	1253	left: 0;
1332	1254	transform: translate(0%, 0%);
		@@ -1384,13 +1306,13 @@
1384	1306	.qcld-main-wrapper div#headingTwoControl a {
1385	1307	font-weight: bold;
1386	1308	}
1387	1309
1388		-.qcl-openai input[type=checkbox]+label {
	1310	+.qcl-openai div#wp-chatbot-openai-settings input[type=checkbox]+label {
1389	1311	position: relative;
1390	1312	width: 18px;
1391	1313	height: 18px;
1392		- border: 2px solid var(--woobot-primary);
	1314	+ border: 2px solid #5b4e96;
1393	1315	border-radius: 4px;
1394	1316	top: 0;
1395	1317	left: 0;
1396	1318	transform: translate(0%, 0%);
		@@ -1403,13 +1325,13 @@
1403	1325	-ms-user-select: none;
1404	1326	user-select: none;
1405	1327	display: flex;
1406	1328	align-items: center;
1407		- margin-bottom: 10px;
	1329	+ margin-bottom: 0;
1408	1330	line-height: 30px;
1409	1331	}
1410	1332
1411		-.qcl-openai input[type=checkbox]+label:after {
	1333	+.qcl-openai div#wp-chatbot-openai-settings input[type=checkbox]+label:after {
1412	1334	content: "";
1413	1335	position: absolute;
1414	1336	width: 0px;
1415	1337	height: 8px;
		@@ -1422,23 +1344,23 @@
1422	1344	opacity: 0;
1423	1345	transition: all ease-out 200ms;
1424	1346	}
1425	1347
1426		-.qcl-openai input[type=checkbox]:checked+label {
	1348	+.qcl-openai div#wp-chatbot-openai-settings input[type=checkbox]:checked+label {
1427	1349	border: 2px solid #22b573;
1428	1350	}
1429	1351
1430		-.qcl-openai input[type=checkbox]:checked+label:after {
	1352	+.qcl-openai div#wp-chatbot-openai-settings input[type=checkbox]:checked+label:after {
1431	1353	opacity: 1;
1432	1354	width: 22px;
1433	1355	}
1434	1356
1435		-.qcl-openai input[type=checkbox] {
	1357	+.qcl-openai div#wp-chatbot-openai-settings input[type=checkbox] {
1436	1358	display: none;
1437	1359	}
1438	1360
1439	1361
1440		-.qcl-openai .form-check {
	1362	+.qcl-openai div#wp-chatbot-openai-settings .form-check {
1441	1363	margin-bottom: 15px;
1442	1364	border: 1px solid #E5E6F2;
1443	1365	padding: 12px 12px;
1444	1366	border-radius: 8px;
		@@ -1443,17 +1365,17 @@
1443	1365	padding: 12px 12px;
1444	1366	border-radius: 8px;
1445	1367	}
1446	1368
1447		-.qcl-openai label.form-check-label span {
	1369	+.qcl-openai div#wp-chatbot-openai-settings label.form-check-label span {
1448	1370	font-size: 12px;
1449	1371	}
1450	1372
1451		-.qcl-openai label.form-check-label span.pro-badge {
	1373	+.qcl-openai div#wp-chatbot-openai-settings label.form-check-label span.pro-badge {
1452	1374	font-size: 9px;
1453	1375	font-weight: 400;
1454	1376	color: #ffffff;
1455		- background: var(--woobot-primary);
	1377	+ background: #5B4E96;
1456	1378	border-radius: 20px;
1457	1379	padding: 2px 8px;
1458	1380	margin-left: 5px;
1459	1381	text-transform: uppercase;
		@@ -1460,10 +1382,10 @@
1460	1382	text-indent: initial;
1461	1383	line-height: 16px;
1462	1384	}
1463	1385
1464		-.qcl-openai a#save_setting {
1465		- margin: 0 0 0 0;
	1386	+.qcl-openai div#wp-chatbot-openai-settings a#save_setting {
	1387	+ margin: 0 0 15px 0;
1466	1388	}
1467	1389
1468	1390	.qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label {
1469	1391	position: relative;
		@@ -1468,9 +1390,9 @@
1468	1390	.qcl-openai div#wp-chatbot-openrouter-settings input[type=checkbox]+label {
1469	1391	position: relative;
1470	1392	width: 18px;
1471	1393	height: 18px;
1472		- border: 2px solid var(--woobot-primary);
	1394	+ border: 2px solid #5b4e96;
1473	1395	border-radius: 4px;
1474	1396	top: 0;
1475	1397	left: 0;
1476	1398	transform: translate(0%, 0%);
		@@ -1531,9 +1453,9 @@
1531	1453	.qcl-openai div#wp-chatbot-openrouter-settings label.form-check-label span.pro-badge {
1532	1454	font-size: 9px;
1533	1455	font-weight: 400;
1534	1456	color: #ffffff;
1535		- background: var(--woobot-primary);
	1457	+ background: #5B4E96;
1536	1458	border-radius: 20px;
1537	1459	padding: 2px 8px;
1538	1460	margin-left: 5px;
1539	1461	text-transform: uppercase;
		@@ -1564,163 +1486,17 @@
1564	1486	}
1565	1487
1566	1488
1567	1489	.admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container h4 {
1568		- width: 365px;
	1490	+ width: 396px;
1569	1491	}
1570	1492
1571	1493	.admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container select {
1572		- display: none;
	1494	+ border-color: #ffffff;
	1495	+ width: 220px;
1573	1496	}
1574	1497
1575		-/* Avatar Location Selector */
1576		-.avatar-location-wrapper {
1577		- background: #ffffff;
1578		- border-radius: 12px;
1579		- padding: 0 0 25px 0;
1580		- margin: 0 0 0 0;
1581		-}
1582	1498
1583		-.avatar-location-title {
1584		- font-size: 13px;
1585		- font-weight: 600;
1586		- color: #6B7280;
1587		- margin: 0 0 10px 0;
1588		- text-transform: none;
1589		- letter-spacing: 0;
1590		-}
1591		-
1592		-.avatar-location-cards {
1593		- display: inline-flex;
1594		- gap: 0;
1595		- background: #F3F4F6;
1596		- border-radius: 10px;
1597		- padding: 4px;
1598		-}
1599		-
1600		-.avatar-location-card {
1601		- display: flex;
1602		- align-items: center;
1603		- gap: 6px;
1604		- padding: 8px 18px;
1605		- border-radius: 8px;
1606		- cursor: pointer;
1607		- font-size: 13px;
1608		- font-weight: 500;
1609		- color: #6B7280;
1610		- background: transparent;
1611		- border: none;
1612		- transition: all 0.2s ease;
1613		- user-select: none;
1614		-}
1615		-
1616		-.avatar-location-card:hover {
1617		- color: #374151;
1618		- background: #E5E7EB;
1619		-}
1620		-
1621		-.avatar-location-card.active {
1622		- background: #ffffff;
1623		- color: #111827;
1624		- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
1625		-}
1626		-
1627		-.avatar-location-card svg {
1628		- flex-shrink: 0;
1629		- color: inherit;
1630		-}
1631		-
1632		-.avatar-location-card.active svg {
1633		- color: #4B5563;
1634		-}
1635		-
1636		-/* AI Provider Cards Wrapper */
1637		-.ai-provider-cards-wrapper {
1638		- background: #ffffff;
1639		- border-radius: 12px;
1640		- padding: 20px 24px 20px 6px;
1641		- margin: 0 0 0 0;
1642		-}
1643		-
1644		-.ai-provider-cards {
1645		- display: flex;
1646		- gap: 12px;
1647		- flex-wrap: wrap;
1648		- padding: 4px 0;
1649		-}
1650		-
1651		-.ai-provider-card {
1652		- display: flex;
1653		- flex-direction: column;
1654		- align-items: center;
1655		- justify-content: center;
1656		- gap: 8px;
1657		- padding: 8px 12px;
1658		- min-width: 110px;
1659		- background: #ffffff;
1660		- border: 2px solid #E5E7EB;
1661		- border-radius: 12px;
1662		- cursor: pointer;
1663		- position: relative;
1664		- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1665		- user-select: none;
1666		-}
1667		-
1668		-.ai-provider-card:hover {
1669		- border-color: #93C5FD;
1670		- background: #F0F7FF;
1671		- transform: translateY(-2px);
1672		- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10);
1673		-}
1674		-
1675		-.ai-provider-card.active {
1676		- border-color: #2563EB;
1677		- background: #EFF6FF;
1678		- box-shadow: 0 2px 8px rgba(37, 99, 235, 0.13);
1679		-}
1680		-
1681		-.ai-provider-check {
1682		- position: absolute;
1683		- top: 6px;
1684		- right: 6px;
1685		- opacity: 0;
1686		- transform: scale(0.5);
1687		- transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1688		- line-height: 0;
1689		-}
1690		-
1691		-.ai-provider-card.active .ai-provider-check {
1692		- opacity: 1;
1693		- transform: scale(1);
1694		-}
1695		-
1696		-.ai-provider-icon {
1697		- width: 40px;
1698		- height: 40px;
1699		- display: flex;
1700		- align-items: center;
1701		- justify-content: center;
1702		-}
1703		-
1704		-.ai-provider-icon svg {
1705		- width: 32px;
1706		- height: 32px;
1707		-}
1708		-
1709		-.ai-provider-name {
1710		- font-size: 12px;
1711		- font-weight: 600;
1712		- color: #4B5563;
1713		- text-align: center;
1714		- white-space: nowrap;
1715		- line-height: 1.2;
1716		-}
1717		-
1718		-.ai-provider-card.active .ai-provider-name {
1719		- color: #1E40AF;
1720		-}
1721		-
1722		-
1723	1499	.admin-maxwith.qcld-openai-main-box .tab-content div#wp-chatbot-openai-training-model .row.my-4 {
1724	1500	font-size: 15px;
1725	1501	display: flex;
1726	1502	width: 100%;
		@@ -1803,9 +1579,9 @@
1803	1579	margin: 2px 10px;
1804	1580	font-size: 15px;
1805	1581	font-weight: 500;
1806	1582	border: none;
1807		- background: var(--woobot-primary);
	1583	+ background: #5b4e96;
1808	1584	color: #fff;
1809	1585	padding: 14px 20px !important;
1810	1586	display: flex;
1811	1587	align-items: center;
		@@ -1814,20 +1590,20 @@
1814	1590
1815	1591	.content_qcbot_help_secion .panel-default>.panel-heading {
1816	1592	color: #333;
1817	1593	background-color: #f5f5f5;
1818		- border-color: var(--woobot-primary);
	1594	+ border-color: #5B4E96;
1819	1595	background: #fff !important;
1820		- color: var(--woobot-primary) !important;
	1596	+ color: #5B4E96 !important;
1821	1597	text-decoration: none !important;
1822	1598	border-radius: 8px;
1823		- border: 2px solid var(--woobot-primary);
	1599	+ border: 2px solid #5B4E96;
1824	1600	padding: 0;
1825	1601	}
1826	1602
1827	1603
1828	1604	.content_qcbot_help_secion .panel-default>.panel-heading:hover {
1829		- background: var(--woobot-primary) !important;
	1605	+ background: #5B4E96 !important;
1830	1606	color: #ffffff !important;
1831	1607	text-decoration: none !important;
1832	1608	border-radius: 8px;
1833	1609	}
		@@ -1848,9 +1624,9 @@
1848	1624	display: block;
1849	1625	padding: 15px 12px;
1850	1626	font-size: 16px;
1851	1627	font-weight: bold;
1852		- color: var(--woobot-primary);
	1628	+ color: #5B4E96;
1853	1629	}
1854	1630
1855	1631	.content_qcbot_help_secion p {
1856	1632	font-size: 15px;
		@@ -1860,11 +1636,9 @@
1860	1636	content: "\f10f";
1861	1637	position: absolute;
1862	1638	right: 18px;
1863	1639	top: 12px;
1864		- font-family: dashicons;
1865		- font-size: 24PX;
1866		- font-weight: normal;
	1640	+ font-family: dashicons;
1867	1641	}
1868	1642
1869	1643	.content_qcbot_help_secion .panel-title a:after {
1870	1644	content: "\f14f";
		@@ -1870,11 +1644,9 @@
1870	1644	content: "\f14f";
1871	1645	position: absolute;
1872	1646	right: 18px;
1873	1647	top: 12px;
1874		- font-family: dashicons;
1875		- font-size: 24PX;
1876		- font-weight: normal;
	1648	+ font-family: dashicons;
1877	1649	}
1878	1650
1879	1651
1880	1652	.content_qcbot_help_secion .panel-default>.panel-heading+.panel-collapse>.panel-body {
		@@ -1940,9 +1712,9 @@
1940	1712	display: block;
1941	1713	padding: 15px 12px;
1942	1714	font-size: 16px;
1943	1715	color: #fff;
1944		- background: var(--woobot-primary);
	1716	+ background: #5B4E96;
1945	1717	width: 100%;
1946	1718	text-align: left;
1947	1719	}
1948	1720
		@@ -1970,12 +1742,12 @@
1970	1742	font-size: 16px;
1971	1743	line-height: 1.71428571;
1972	1744	font-weight: 600;
1973	1745	background: #ffffff;
1974		- color: var(--woobot-primary);
	1746	+ color: #5b4e96;
1975	1747	text-decoration: none;
1976	1748	white-space: nowrap;
1977		- border: 1px solid var(--woobot-primary);
	1749	+ border: 1px solid #5b4e96;
1978	1750	padding: 14px 20px !important;
1979	1751	line-height: normal !important;
1980	1752	border-radius: 6px;
1981	1753
		@@ -1988,13 +1760,13 @@
1988	1760	margin-left: .5em;
1989	1761	font-size: 16px;
1990	1762	line-height: 1.71428571;
1991	1763	font-weight: 600;
1992		- background: var(--woobot-primary);
	1764	+ background: #5b4e96;
1993	1765	color: #fff;
1994	1766	text-decoration: none;
1995	1767	white-space: nowrap;
1996		- border: 1px solid var(--woobot-primary);
	1768	+ border: 1px solid #5b4e96;
1997	1769	padding: 14px 20px !important;
1998	1770	line-height: normal !important;
1999	1771
2000	1772	}
		@@ -2016,18 +1788,18 @@
2016	1788	padding: 14px 20px;
2017	1789	width: 100%;
2018	1790	font-size: 16px;
2019	1791	font-weight: 500;
2020		- color: var(--woobot-nav-muted);
	1792	+ color: #988FBD;
2021	1793	border-radius: 8px;
2022	1794	position: relative;
2023	1795	display: flex;
2024	1796	align-items: center;
2025	1797	gap: 15px;
2026		- background: var(--woobot-primary);
	1798	+ background: #5B4E96;
2027	1799	color: #ffffff;
2028	1800	text-decoration: none;
2029		- border-color: var(--woobot-primary) !important;
	1801	+ border-color: #5b4e96 !important;
2030	1802	}
2031	1803
2032	1804
2033	1805
		@@ -2040,9 +1812,9 @@
2040	1812	.wp-chatbot-language-center-summmery-checkbox input[type=checkbox]+label {
2041	1813	position: relative;
2042	1814	width: 18px;
2043	1815	height: 18px;
2044		- border: 2px solid var(--woobot-primary);
	1816	+ border: 2px solid #5b4e96;
2045	1817	border-radius: 4px;
2046	1818	top: 0;
2047	1819	left: 0;
2048	1820	transform: translate(0%, 0%);
		@@ -2149,9 +1921,9 @@
2149	1921	text-align: center;
2150	1922	display: flex;
2151	1923	align-items: center;
2152	1924	justify-content: center;
2153		- background: color-mix(in srgb, var(--woobot-primary) 56%, transparent);
	1925	+ background: #5b4e968f;
2154	1926	color: #ffffff;
2155	1927	font-size: 60px;
2156	1928	border-radius: 8px;
2157	1929	}
		@@ -2159,9 +1931,9 @@
2159	1931	text-decoration: none !important;
2160	1932	position: relative;
2161	1933	}
2162	1934	.docs_icon span {
2163		- background: var(--woobot-primary);
	1935	+ background: #5b4e96;
2164	1936	padding: 25px 25px;
2165	1937	border-radius: 50%;
2166	1938	font-size: 82px;
2167	1939	width: auto;
		@@ -2195,14 +1967,14 @@
2195	1967
2196	1968	.wp-chatbot-wrap a.nav-tab.sld_click_handle {
2197	1969	margin-right: .5em;
2198	1970	line-height: 1.42857143;
2199		- border: 1px solid var(--woobot-primary) !important;
	1971	+ border: 1px solid #5b4e96 !important;
2200	1972	border-radius: 6px !important;
2201		- border: 1px solid var(--woobot-primary) !important;
	1973	+ border: 1px solid #5b4e96 !important;
2202	1974	padding: 10px 20px !important;
2203	1975	border-radius: 8px !important;
2204		- color: var(--woobot-primary) !important;
	1976	+ color: #5b4e96 !important;
2205	1977	font-size: 15px !important;
2206	1978	font-weight: 600;
2207	1979	line-height: normal !important;
2208	1980	background: #fff;
		@@ -2210,11 +1982,11 @@
2210	1982
2211	1983	.wp-chatbot-wrap a.nav-tab.sld_click_handle:hover, .wp-chatbot-wrap a.nav-tab.sld_click_handle.nav-tab-active{
2212	1984	margin-right: .5em;
2213	1985	line-height: 1.42857143;
2214		- border: 1px solid var(--woobot-primary) !important;
	1986	+ border: 1px solid #5b4e96 !important;
2215	1987	border-radius: 6px !important;
2216		- border: 1px solid var(--woobot-primary) !important;
	1988	+ border: 1px solid #5b4e96 !important;
2217	1989	padding: 10px 20px !important;
2218	1990	border-radius: 8px !important;
2219	1991	color: #fff !important;
2220	1992	font-size: 15px !important;
		@@ -2219,9 +1991,9 @@
2219	1991	color: #fff !important;
2220	1992	font-size: 15px !important;
2221	1993	font-weight: 600;
2222	1994	line-height: normal !important;
2223		- background: var(--woobot-primary);
	1995	+ background: #5b4e96;
2224	1996	}
2225	1997
2226	1998
2227	1999
		@@ -2251,9 +2023,9 @@
2251	2023	padding: 14px 20px;
2252	2024	width: auto;
2253	2025	font-size: 16px;
2254	2026	font-weight: 500;
2255		- color: var(--woobot-nav-muted);
	2027	+ color: #988FBD;
2256	2028	border-radius: 8px;
2257	2029	position: relative;
2258	2030	display: flex;
2259	2031	align-items: center;
		@@ -2260,9 +2032,9 @@
2260	2032	gap: 15px;
2261	2033	background: #d14529;
2262	2034	color: #ffffff;
2263	2035	text-decoration: none;
2264		- border-color: var(--woobot-primary) !important;
	2036	+ border-color: #5b4e96 !important;
2265	2037	}
2266	2038
2267	2039
2268	2040	button.swal2-confirm.btn.btn-lg.swal2-styled {
		@@ -2272,9 +2044,9 @@
2272	2044	.chatbot-wpbot-lite_page_wpbot button.swal2-deny.swal2-styled {
2273	2045	display: none !important;
2274	2046	}
2275	2047	a#qcld_save_openrouter_setting {
2276		- background: var(--woobot-primary);
	2048	+ background: #5B4E96;
2277	2049	color: #ffffff;
2278	2050	border: none;
2279	2051	padding: 12px 30px;
2280	2052	}
		@@ -2279,9 +2051,9 @@
2279	2051	padding: 12px 30px;
2280	2052	}
2281	2053
2282	2054	a#save_setting {
2283		- background: var(--woobot-primary);
	2055	+ background: #5B4E96;
2284	2056	color: #ffffff;
2285	2057	border: none;
2286	2058	padding: 12px 30px;
2287	2059	}
		@@ -2401,12 +2173,12 @@
2401	2173	width: auto;
2402	2174	font-size: 16px;
2403	2175	align-items: center;
2404	2176	gap: 15px;
2405		- background: var(--woobot-primary);
	2177	+ background: #5B4E96;
2406	2178	color: #ffffff;
2407	2179	text-decoration: none;
2408		- border-color: var(--woobot-primary) !important;
	2180	+ border-color: #5b4e96 !important;
2409	2181	}
2410	2182
2411	2183	.wrap.qcld-main-wrapper a:focus {
2412	2184	outline: none !important;
		@@ -2420,9 +2192,9 @@
2420	2192
2421	2193
2422	2194	.qcld-general-settings-connection-notic {
2423	2195	background: #eee;
2424		- border: 2px solid var(--woobot-primary);
	2196	+ border: 2px solid #5b4e96;
2425	2197	border-radius: 8px;
2426	2198	margin: 0 0 15px 0;
2427	2199	padding: 12px;
2428	2200	background: linear-gradient(192deg, #FFE3E1 4%, #E9E4FF 98.26%);
		@@ -2443,9 +2215,9 @@
2443	2215	transition: all 200ms;
2444	2216	font-size: 30px;
2445	2217	font-weight: bold;
2446	2218	text-decoration: none;
2447		- color: var(--woobot-primary);
	2219	+ color: #5b4e96;
2448	2220	}
2449	2221	.qcld-general-settings-close:hover {
2450	2222	color: orange;
2451	2223	}
		@@ -2475,9 +2247,9 @@
2475	2247	font-weight: bold;
2476	2248	}
2477	2249
2478	2250	#qcld-show-more-wrapper-box .qcld-show-more-show-more-height {
2479		- height: 338px;
	2251	+ height: 190px;
2480	2252	overflow:hidden;
2481	2253	}
2482	2254
2483	2255	#qcld-show-more-wrapper-box .qcld-show-more-show-more i {
		@@ -2482,9 +2254,9 @@
2482	2254
2483	2255	#qcld-show-more-wrapper-box .qcld-show-more-show-more i {
2484	2256	display: block;
2485	2257	padding: 0 0 0 0;
2486		- background: var(--woobot-primary);
	2258	+ background: #5b4e96;
2487	2259	width: 30px;
2488	2260	height: 30px;
2489	2261	line-height: 30px;
2490	2262	border-radius: 50%;
		@@ -2496,9 +2268,9 @@
2496	2268	.qcl-openai div#wp-chatbot-gemini-settings input[type=checkbox]+label {
2497	2269	position: relative;
2498	2270	width: 18px;
2499	2271	height: 18px;
2500		- border: 2px solid var(--woobot-primary);
	2272	+ border: 2px solid #5b4e96;
2501	2273	border-radius: 4px;
2502	2274	top: 0;
2503	2275	left: 0;
2504	2276	transform: translate(0%, 0%);
		@@ -2560,9 +2332,9 @@
2560	2332	.qcl-openai div#wp-chatbot-gemini-settings label.form-check-label span.pro-badge {
2561	2333	font-size: 9px;
2562	2334	font-weight: 400;
2563	2335	color: #ffffff;
2564		- background: var(--woobot-primary);
	2336	+ background: #5B4E96;
2565	2337	border-radius: 20px;
2566	2338	padding: 2px 8px;
2567	2339	margin-left: 5px;
2568	2340	text-transform: uppercase;
		@@ -2586,56 +2358,8 @@
2586	2358	textarea#qcld_openai_system_content {
2587	2359	height: 120px;
2588	2360	line-height: 28px;
2589	2361	}
2590		-.qcld-openai-system-presets {
2591		- display: flex;
2592		- gap: 10px;
2593		- margin: 12px 0;
2594		- overflow-x: auto;
2595		- padding-bottom: 8px;
2596		- scroll-snap-type: x proximity;
2597		- flex-wrap: wrap;
2598		-}
2599		-.qcld-openai-system-preset {
2600		- align-items: center;
2601		- border: 1px solid #dcdcde;
2602		- border-radius: 6px;
2603		- cursor: pointer;
2604		- display: flex;
2605		- flex: 0 0 220px;
2606		- gap: 10px;
2607		- justify-content: center;
2608		- margin: 0;
2609		- min-height: 70px;
2610		- padding: 12px;
2611		- scroll-snap-align: start;
2612		- text-align: center;
2613		-}
2614		-.qcld-openai-system-preset input {
2615		- display: none;
2616		-}
2617		-.qcld-openai-system-preset.is-selected {
2618		- background: #f0f6fc;
2619		- border-color: #2271b1;
2620		-}
2621		-.qcld-openai-system-preset-content {
2622		- display: grid;
2623		- gap: 4px;
2624		- line-height: 22px;
2625		-}
2626		-.qcld-openai-system-preset-title {
2627		- color: #1d2327;
2628		- font-weight: 600;
2629		-}
2630		-.qcld-openai-system-preset-value {
2631		- display: none;
2632		-}
2633		-@media (max-width: 782px) {
2634		- .qcld-openai-system-preset {
2635		- flex-basis: 180px;
2636		- }
2637		-}
2638	2362	.qcld-main-wrapper .alert.alert-warning {
2639	2363	background: linear-gradient(130deg, #ffffff 70%, #e9e4ff 96% 96%);
2640	2364	border-radius: 6px;
2641	2365	color: #721c24;
		@@ -2654,9 +2378,9 @@
2654	2378	font-weight: bold;
2655	2379	}
2656	2380
2657	2381	a#qcld_save_gemini_setting {
2658		- background: var(--woobot-primary);
	2382	+ background: #5B4E96;
2659	2383	color: #ffffff;
2660	2384	border: none;
2661	2385	padding: 12px 30px;
2662	2386	}
		@@ -2695,9 +2419,9 @@
2695	2419	}
2696	2420
2697	2421	.wp-chatbot-wrap .qc-opt-language-title{
2698	2422	font-weight: bold !important;
2699		- color: var(--woobot-primary) !important;
	2423	+ color: #5b4e96 !important;
2700	2424	font-size: 16px;
2701	2425	}
2702	2426
2703	2427	button.qcld_chatbot_custom_icon_button.button, button.wp_chatbot_custom_agent_button.button {
		@@ -2704,22 +2428,22 @@
2704	2428	padding: 2px 20px;
2705	2429	width: auto;
2706	2430	font-size: 14px;
2707	2431	font-weight: 500;
2708		- color: var(--woobot-nav-muted);
	2432	+ color: #988FBD;
2709	2433	border-radius: 8px;
2710	2434	background: #fff;
2711		- color: var(--woobot-primary);
	2435	+ color: #5B4E96;
2712	2436	text-decoration: none;
2713	2437	margin: 0;
2714		- border: 2px solid var(--woobot-primary);
	2438	+ border: 2px solid #5B4E96;
2715	2439
2716	2440	}
2717	2441
2718	2442	button.qcld_chatbot_custom_icon_button.button:hover, button.wp_chatbot_custom_agent_button.button:hover {
2719		- background: var(--woobot-primary);
	2443	+ background: #5B4E96;
2720	2444	color: #fff;
2721		- border: 2px solid var(--woobot-primary);
	2445	+ border: 2px solid #5B4E96;
2722	2446
2723	2447	}
2724	2448
2725	2449
		@@ -2758,20 +2482,8 @@
2758	2482	#qcld_check_connection i{
2759	2483	animation: rotation infinite 3s linear;
2760	2484	}
2761	2485
2762		-.wp-chatbot-wrap div#wp-chatbot-custom-color-options .form-group {
2763		- min-height: 90px;
2764		-}
2765		-
2766		-div#promotion-wpchatbot .qc-review-text a {
2767		- display: block;
2768		-}
2769		-.qcld-wp-chatbot-wrap-header-logo {
2770		- display: flex;
2771		- align-items: center;
2772		- gap: 10px;
2773		-}
2774	2486	@keyframes rotation{
2775	2487	from{
2776	2488	transform:rotate(360deg);
2777	2489	}
		@@ -2778,1004 +2490,5 @@
2778	2490
2779	2491	to{
2780	2492	transform:rotate(0deg);
2781	2493	}
2782		-}
2783		-
2784		-.qcld-btn-primary {
2785		- padding: 14px 30px;
2786		- width: auto;
2787		- font-size: 16px;
2788		- font-weight: 500;
2789		- color: var(--woobot-nav-muted);
2790		- border-radius: 8px;
2791		- position: relative;
2792		- display: inline-block;
2793		- align-items: center;
2794		- gap: 15px;
2795		- background: var(--woobot-primary);
2796		- color: #ffffff;
2797		- text-decoration: none;
2798		- border-color: var(--woobot-primary) !important;
2799		- line-height: normal;
2800		-}
2801		-div#wpfooter {
2802		- display: none;
2803		-}
2804		-
2805		-.qcld-btn-primary {
2806		-
2807		- border: none;
2808		-}
2809		-
2810		-div#qcld-rag-settings-tab .wrap h3 {
2811		- padding: 0 0 8px 0;
2812		- margin: 20px 0 12px 0;
2813		- font-weight: bold;
2814		- font-size: 22px !important;
2815		- color: var(--woobot-primary) !important;
2816		-}
2817		-
2818		-div#rag-sync .wrap h3 {
2819		- padding: 0 0 8px 0;
2820		- margin: 10px 0 12px 0;
2821		- font-weight: bold;
2822		- font-size: 22px !important;
2823		- color: var(--woobot-primary) !important;
2824		-}
2825		-
2826		-div#rag-settings h2.nav-tab-wrapper a {
2827		- margin-right: 0;
2828		- line-height: 1.42857143;
2829		- border: 1px solid var(--woobot-primary);
2830		- border-radius: 6px;
2831		- border: 1px solid var(--woobot-primary);
2832		- padding: 10px 20px !important;
2833		- border-radius: 8px;
2834		- color: var(--woobot-primary);
2835		- font-size: 15px;
2836		- font-weight: 600;
2837		- line-height: normal !important;
2838		- background: #fff;
2839		-}
2840		-
2841		-div#rag-settings h2.nav-tab-wrapper {
2842		- margin: 0;
2843		- padding: 0;
2844		- border: none;
2845		-}
2846		-
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 {
2848		- color: #fff;
2849		- background: var(--woobot-primary);
2850		- text-decoration: none !important;
2851		- border: 1px solid var(--woobot-primary);
2852		-}
2853		-
2854		-
2855		-
2856		-button#rag-pdf-submit, button#rag-csv-submit, button#rag-xaml-submit, button#rag_embed_btn {
2857		- padding: 8px 15px;
2858		- width: auto;
2859		- font-size: 16px;
2860		- font-weight: 500;
2861		- color: var(--woobot-nav-muted);
2862		- border-radius: 8px;
2863		- position: relative;
2864		- display: inline-block;
2865		- align-items: center;
2866		- gap: 15px;
2867		- background: var(--woobot-primary);
2868		- color: #ffffff;
2869		- text-decoration: none;
2870		- border-color: var(--woobot-primary) !important;
2871		- line-height: normal;
2872		-}
2873		-
2874		-div#rag-sync .wrap {
2875		- border: 1px solid #eee;
2876		- padding: 8px 12px;
2877		- border-radius: 6px;
2878		-}
2879		-
2880		-
2881		-
2882		-div#qcld-rag-settings-tab .wrap:first-child {
2883		- border: 1px solid #eee;
2884		- padding: 8px 12px;
2885		- border-radius: 6px;
2886		-}
2887		-
2888		-
2889		-.qcl-openai div#rag-database input[type=checkbox] {
2890		- display: block;
2891		-}
2892		-
2893		-.tablenav-pages {
2894		- text-align: right;
2895		- padding: 8px 0;
2896		-}
2897		-button#botmaster_submit_sitemap_btn {
2898		- background: var(--woobot-primary);
2899		- border-color: var(--woobot-primary);
2900		-}
2901		-div#rag-database h3 {
2902		- padding: 0 0 8px 0;
2903		- margin: 15px 0 8px 0;
2904		- font-weight: bold;
2905		- font-size: 22px !important;
2906		- color: var(--woobot-primary) !important;
2907		-}
2908		-
2909		-.qcl-openai div#rag-settings h2.nav-tab-wrapper a:focus {
2910		- border: 1px solid var(--woobot-primary) !important;
2911		-}
2912		-button#rag-delete-all {
2913		- background: var(--woobot-primary);
2914		- color: #fff;
2915		- border-color: var(--woobot-primary);
2916		-}
2917		-
2918		-div#rag-database table.widefat {
2919		- border: 1px solid #ffffff;
2920		- box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
2921		-}
2922		-div#rag-database .widefat thead td, div#rag-database .widefat thead th {
2923		- border-bottom: 1px solid #ffffff;
2924		-}
2925		-
2926		-div#rag-database table.widefat thead {
2927		- background: var(--woobot-primary);
2928		- color: #fff;
2929		-}
2930		-div#rag-database table.widefat thead th {
2931		- color: #fff;
2932		-}
2933		-.qcl-openai div#rag-database input[type=checkbox] {
2934		- display: block;
2935		- width: 18px;
2936		- height: 18px;
2937		-}
2938		-div#wp-chatbot-openai-rag input[type=checkbox]+label {
2939		- margin-bottom: 0;
2940		-}
2941		-.qcl-openai input[type=checkbox]+label {
2942		- margin-bottom: 0;
2943		-}
2944		-div#qcld-rag-settings-tab .wrap .mb-3 {
2945		- padding: 5px 0;
2946		-}
2947		-div#rag-database input#search-submit {
2948		- background: var(--woobot-primary);
2949		- color: #fff;
2950		- border-color: var(--woobot-primary);
2951		-}
2952		-.rag_embed_cpts_wrapper {
2953		- display: flex;
2954		- flex-direction: column;
2955		- gap: 6px;
2956		-}
2957		-div#wp-chatbot-gemini-settings .input-group {
2958		- display: flex;
2959		- gap: 10px;
2960		-}
2961		-div#wp-chatbot-grok-settings a#qcld_save_grok_setting {
2962		- background: var(--woobot-primary);
2963		- color: #ffffff;
2964		- border: none;
2965		- padding: 12px 30px;
2966		-}
2967		-button#qcld_gemini_fetch_models {
2968		- background: var(--woobot-primary);
2969		- color: #ffffff;
2970		- border: none;
2971		-}
2972		-.wp-chatbot-wrap label.block.text-sm.font-medium.text-gray-700.mb-2.qc-opt-language-title {
2973		- display: block;
2974		- padding: 0 0 5px 0;
2975		-}
2976		-select#qcld_language_center_select {
2977		- padding: 0 0 0 0;
2978		- margin: 0 0 6px 0;
2979		- padding: 0 4px;
2980		- min-width: 220px;
2981		-}
2982		-select#qcld_language_center_select:focus {
2983		- border-color: var(--woobot-primary);
2984		- color: var(--woobot-primary);
2985		- box-shadow: 0 0 0 1px var(--woobot-primary);
2986		-}
2987		-div#common-ai-settings h2 a {
2988		- background: var(--woobot-primary);
2989		- color: #ffffff;
2990		- display: inline-block !important;
2991		- font-size: 16px;
2992		- padding: 8px 15px;
2993		- border-radius: 8px;
2994		-}
2995		-div#common-ai-settings h2.nav-tab-wrapper {
2996		- border: none;
2997		-}
2998		-div#qcld-rate-settings-tab {
2999		- display: block !important;
3000		-}
3001		-div#common-ai-settings .form-check {
3002		- margin-bottom: 15px;
3003		- border: 0px solid #E5E6F2;
3004		- padding: 12px 12px;
3005		- border-radius: 8px;
3006		-}
3007		-.cxsc-settings-blocks.cxsc-settings-blocks-style input[type=radio]:checked::before {
3008		- width: 1.5rem;
3009		- height: 1.5rem;
3010		- margin: -1px 0 0 -1px;
3011		-}
3012		-.cxsc-settings-blocks.cxsc-settings-blocks-style .radio-inline input[type=radio] {
3013		- width: 1.5rem;
3014		- height: 1.5rem;
3015		-}
3016		-button#rag-docx-submit, button#rag-migrate-btn, button#rag-media-docx-btn, button#qcld-rag-list-docx-btn, button#rag-media-pdf-btn, button#qcld-rag-list-pdf-btn {
3017		- padding: 8px 15px;
3018		- width: auto;
3019		- font-size: 16px;
3020		- font-weight: 500;
3021		- color: var(--woobot-nav-muted);
3022		- border-radius: 8px;
3023		- position: relative;
3024		- display: inline-block;
3025		- align-items: center;
3026		- gap: 15px;
3027		- background: var(--woobot-primary);
3028		- color: #ffffff;
3029		- text-decoration: none;
3030		- border-color: var(--woobot-primary) !important;
3031		- line-height: normal;
3032		-}
3033		-button#botmaster_submit_googlesheet_btn, button#botmaster_submit_googledoc_btn {
3034		- background: var(--woobot-primary);
3035		- border-color: var(--woobot-primary);
3036		-}
3037		-.wpbot-wizard-field select#wizard_ai_provider {
3038		- background: transparent;
3039		- color: #fff;
3040		- width: 100%;
3041		- display: block;
3042		- max-width: unset;
3043		-}
3044		-.wpbot-wizard-field select#wizard_ai_provider:hover {
3045		- border-color: var(--woobot-primary);
3046		- color: var(--woobot-primary);
3047		- box-shadow: 0 0 0 1px var(--woobot-primary);
3048		-}
3049		-div#wizard_api_key_container input#wizard_api_key {
3050		- background: transparent;
3051		- color: #fff;
3052		-}
3053		-div#collapseTwoControl input[type=radio]:checked::before {
3054		- background-color: var(--woobot-primary);
3055		-}
3056		-.nav-tab-wrapper.sld_nav_container.wppt_nav_container.qcld_help_wppt_nav_container{
3057		- width: 320px !important;
3058		- gap: 0;
3059		-}
3060		-div#rag-settings tbody#rag-knowledge-base-list tr td button {
3061		- padding: 6px 20px;
3062		- font-weight: bold;
3063		- font-size: 12px;
3064		-}
3065		-div#rag-settings tbody#rag-knowledge-base-list tr td button.button.button-small.button-link-delete.rag-delete-doc{
3066		- background: #d14529;
3067		- color: #fff;
3068		- border-color: #d14529;
3069		-}
3070		-button#ai-knowledge-base-tab {
3071		- animation: pulse 2s infinite;
3072		-}
3073		-@keyframes pulse {
3074		- 0% {
3075		- transform: scale(1);
3076		- }
3077		- 50% {
3078		- transform: scale(1.05);
3079		- }
3080		- 100% {
3081		- transform: scale(1);
3082		- }
3083		-}
3084		-footer.wp-chatbot-admin-footer input#submit {
3085		- background: var(--woobot-primary);
3086		- padding: 12px 30px;
3087		-}
3088		-footer.wp-chatbot-admin-footer {
3089		- padding: 0 20px 20px 20px;
3090		- margin: 0 20px;
3091		-}
3092		-.qcld-wp-chatbot-wrap-header_inn a.button.page-title-action {
3093		- padding: 8px 15px;
3094		- background: #ffffff;
3095		- color: var(--woobot-primary);
3096		- border: 2px solid var(--woobot-primary);
3097		- border-radius: 6px;
3098		- font-weight: bold;
3099		- position: absolute;
3100		- top: 30px;
3101		- left: 280px;
3102		- line-height: normal;
3103		- min-height: unset;
3104		-}
3105		-.qcld-wp-chatbot-wrap-header_inn a.button.page-title-action:hover {
3106		- padding: 8px 15px;
3107		- background: var(--woobot-primary);
3108		- color: #fff;
3109		- border: 2px solid var(--woobot-primary);
3110		- border-radius: 6px;
3111		- font-weight: bold;
3112		- position: absolute;
3113		- top: 31px;
3114		- left: 280px;
3115		-}
3116		-.qcld-session-history_menu_box .btn.btn-primary {
3117		- background: var(--woobot-primary) !important;
3118		- color: #fff !important;
3119		-}
3120		-.qcld-session-history_menu_box a.btn.btn-success {
3121		- padding: 8px 24px;
3122		- width: auto;
3123		- font-size: 15px;
3124		- font-weight: 500;
3125		- border-radius: 8px;
3126		- position: relative;
3127		- background: #ffffff;
3128		- color: var(--woobot-primary);
3129		- text-decoration: none;
3130		- line-height: normal;
3131		- border: 2px solid var(--woobot-primary);
3132		-}
3133		-.qcld-session-history_menu_box a.btn.btn-success:hover {
3134		- padding: 8px 24px;
3135		- width: auto;
3136		- font-size: 15px;
3137		- font-weight: 500;
3138		- border-radius: 8px;
3139		- position: relative;
3140		- background: var(--woobot-primary);
3141		- color: #fff;
3142		- text-decoration: none;
3143		- line-height: normal;
3144		- border: 2px solid var(--woobot-primary);
3145		-}
3146		-.Expandmore {
3147		- background: #23ab10;
3148		- display: inline-block;
3149		- padding: 4px 10px;
3150		- font-size: 14px;
3151		- border-radius: 6px;
3152		- position: relative;
3153		- top: -15px;
3154		-}
3155		-.Collapsemore {
3156		- background: #ff0000;
3157		- display: inline-block;
3158		- padding: 4px 10px;
3159		- font-size: 14px;
3160		- border-radius: 6px;
3161		- position: relative;
3162		- top: -15px;
3163		-}
3164		-.Expandmore span {
3165		- color: #fff;
3166		- margin: 0 0 0 8px;
3167		- padding: 0 5px;
3168		- font-size: 18px;
3169		-}
3170		-.admin-maxwith.qcld-openai-main-box .col-auto.me-auto.ai-settings-title-container {
3171		- display: flex;
3172		- justify-content: flex-start;
3173		- align-items: center;
3174		-}
3175		-.avatar-location-wrapper {
3176		- padding: 0 0 25px 0;
3177		-}
3178		-.avatar-location-card.active {
3179		- background: var(--woobot-primary);
3180		- color: #ffffff;
3181		-}
3182		-.avatar-location-card.active svg {
3183		- color: #ffffff;
3184		-}
3185		-.ai-provider-cards {
3186		- margin: 0 0 0 0%;
3187		-}
3188		-.qcld-wp-chatbot-wrap-header_inn_heading a.button.page-title-action {
3189		- margin: 0 0 0 4px;
3190		-}
3191		-label.qcld_label_width_full.qcld_label_width_half {
3192		- font-size: 12px;
3193		- padding: 6px 0 0 0;
3194		-}
3195		-.qc_menu_setup_area {
3196		- margin: 40px 0 0 0;
3197		-}
3198		-input#chatbot_content_max_height, input#chatbot_content_max_height_responsive {
3199		- width: 170px;
3200		- border: 1px solid #eee;
3201		- border-radius: 6px;
3202		-}
3203		-.ai-provider-cards-wrapper h4 {
3204		- width: 410px;
3205		-}
3206		-.ai-provider-cards-wrapper {
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		- }
3779		-}
3780		-
3781		-
	2494	+}