PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 1.4.2
MxChat – AI Chatbot & Content Generation for WordPress v1.4.2
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | css/admin-style.css +74 -1998 2.0.51.4.2 View file →
@@ -1,537 +1,4 @@
1 -.wp-core-ui .notice.is-dismissible {
2 - z-index: 10000;
3 -}
4 -
5 -#system_prompt_instructions {
6 - transition: height 0.3s ease;
7 -}
8 -
9 -.mxchat-form-intent {
10 - background-color: rgba(240, 240, 245, 0.5);
11 -}
12 -
13 -.mxchat-badge {
14 - display: inline-block;
15 - padding: 2px 8px;
16 - border-radius: 12px;
17 - background: #7873f5;
18 - color: white;
19 - font-size: 12px;
20 - margin-left: 8px;
21 -}
22 -
23 -.mxchat-threshold-readonly {
24 - padding: 8px;
25 - background: rgba(120, 115, 245, 0.1);
26 - border-radius: 4px;
27 - text-align: center;
28 -}
29 -
30 -.mxchat-form-intent .mxchat-button-secondary {
31 - background: #7873f5;
32 - color: white;
33 - border: none;
34 - padding: 6px 12px;
35 - border-radius: 4px;
36 - text-decoration: none;
37 - display: inline-block;
38 -}
39 -
40 -.mxchat-form-intent .mxchat-button-secondary:hover {
41 - background: #6863e5;
42 -}
43 -
44 -/* Tab Navigation */
45 -.mxchat-tabs {
46 - border-bottom: 1px solid #ccc;
47 - margin-bottom: 20px;
48 - padding-bottom: 0;
49 -}
50 -
51 -.mxchat-default-db-h2 {
52 - text-align: center;
53 - margin: 0px;
54 - padding: 0px;
55 -}
56 -
57 -.mxchat-tab-button {
58 - background: #f1f1f1;
59 - border: 1px solid #ccc;
60 - border-bottom: none;
61 - color: #555;
62 - cursor: pointer;
63 - font-size: 14px;
64 - margin: 0 5px -1px 0;
65 - padding: 10px 15px;
66 - transition: all 0.3s ease;
67 -}
68 -
69 -.mxchat-tab-button.active {
70 - background: #fff;
71 - border-bottom: 1px solid #fff;
72 - color: #000;
73 -}
74 -
75 -/* Tab Content */
76 -.mxchat-tab-content {
77 - display: none;
78 - padding: 25px;
79 - background: white;
80 - border: 1px solid #ddd;
81 - border-radius: 10px;
82 - box-shadow: 0 2px 15px rgba(0,0,0,0.05);
83 - animation: fadeIn 0.3s ease-in-out;
84 -}
85 -
86 -#default-db.mxchat-tab-content, #pinecone-db.mxchat-tab-content {
87 - border: none;
88 - box-shadow: none;
89 - padding: 0px;
90 -}
91 -
92 -.mxchat-tab-content.active {
93 - display: block;
94 -}
95 -
96 -@keyframes fadeIn {
97 - from { opacity: 0; }
98 - to { opacity: 1; }
99 -}
100 -
101 -.mxchat-tab-content.active {
102 - display: block;
103 -}
104 -
105 -/* Pinecone Settings Styling */
106 -.mxchat-input-group {
107 - margin-bottom: 20px;
108 -}
109 -
110 -.mxchat-input-group label {
111 - display: block;
112 - font-weight: 600;
113 - margin-bottom: 5px;
114 -}
115 -
116 -.mxchat-input-group .description {
117 - color: #666;
118 - font-style: italic;
119 - margin-top: 5px;
120 -}
121 -
122 -
123 -.mxchat-sync-settings {
124 - background: #fff;
125 - border-radius: 5px;
126 -}
127 -
128 -.mxchat-toggle-container {
129 - margin-bottom: 15px;
130 -}
131 -
132 -.mxchat-toggle-switch {
133 - position: relative;
134 - display: inline-block;
135 - width: 60px;
136 - height: 34px;
137 -}
138 -
139 -.mxchat-toggle-switch input {
140 - opacity: 0;
141 - width: 0;
142 - height: 0;
143 -}
144 -
145 -.mxchat-toggle-slider {
146 - position: absolute;
147 - cursor: pointer;
148 - top: 0;
149 - left: 0;
150 - right: 0;
151 - bottom: 0;
152 - background-color: #ccc;
153 - transition: .4s;
154 - border-radius: 34px;
155 -}
156 -
157 -.mxchat-toggle-slider:before {
158 - position: absolute;
159 - content: "";
160 - height: 26px;
161 - width: 26px;
162 - left: 4px;
163 - bottom: 4px;
164 - background-color: white;
165 - transition: .4s;
166 - border-radius: 50%;
167 -}
168 -
169 -input:checked + .mxchat-toggle-slider {
170 - background-color: #2196F3;
171 -}
172 -
173 -input:checked + .mxchat-toggle-slider:before {
174 - transform: translateX(26px);
175 -}
176 -
177 -.mxchat-toggle-label {
178 - vertical-align: super;
179 - font-weight: 500;
180 -}
181 -.mxchat-knowledge-container {
182 - display: flex;
183 - flex-direction: column;
184 - gap: 1rem;
185 - margin: 1.5rem 0;
186 - padding: 1rem;
187 - background: #fff;
188 - border-radius: 10px;
189 - border: 1px solid #ddd;
190 - box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
191 -}
192 -
193 -/* Left Column */
194 -.mxchat-knowledge-controls {
195 - flex: 1;
196 - display: flex;
197 - gap: 1rem;
198 - justify-content: space-between;
199 - align-items: center;
200 -}
201 -
202 -.mxchat-controls-header {
203 - display: flex;
204 - justify-content: space-between;
205 - align-items: center;
206 -}
207 -
208 -.displaying-num {
209 - color: #666;
210 - font-size: 0.9rem;
211 -}
212 -
213 -.mxchat-delete-all {
214 - color: #dc3545;
215 - border-color: #dc3545;
216 -}
217 -
218 -.mxchat-delete-all:hover {
219 - background: #dc3545;
220 - color: #fff;
221 -}
222 -
223 -.mxchat-pagination .page-numbers {
224 - padding: 0.25rem 0.5rem;
225 - margin: 0 0.25rem;
226 - border: 1px solid #ddd;
227 - border-radius: 4px;
228 - text-decoration: none;
229 -}
230 -
231 -.mxchat-pagination .current {
232 - background: #2271b1;
233 - color: #fff;
234 - border-color: #2271b1;
235 -}
236 -
237 -/* Right Column */
238 -.mxchat-knowledge-search {
239 - flex: 1;
240 -}
241 -.search-input {
242 - flex: 1;
243 - padding: 0.5rem;
244 - border: 1px solid #ddd;
245 - border-radius: 4px;
246 -}
247 -
248 -.search-button {
249 - display: flex;
250 - align-items: center;
251 - gap: 0.5rem;
252 - padding: 0.5rem 1rem;
253 -}
254 -
255 -/* Mobile Responsiveness */
256 -@media screen and (max-width: 782px) {
257 - .mxchat-knowledge-controls {
258 - flex-direction: column;
259 - }
260 -
261 - .mxchat-grid-container {
262 - display: grid;
263 - /* Add these properties */
264 - max-width: 100%; /* Constrain to parent width */
265 - width: 100%;
266 - overflow-x: hidden; /* Prevent horizontal scrolling */
267 - grid-template-columns: 1fr; /* Single column layout */
268 - grid-gap: 20px;
269 - }
270 -
271 - .mxchat-controls-header {
272 - flex-direction: column;
273 - gap: 1rem;
274 - align-items: flex-start;
275 - }
276 -
277 - .mxchat-search-group {
278 - flex-direction: column;
279 - }
280 -
281 -}
282 -
283 -
284 -
285 -
286 -
287 -
288 -
289 -
290 -
291 -
292 -.mxchat-modal {
293 - display: none;
294 - position: fixed;
295 - z-index: 1000;
296 - left: 0;
297 - top: 0;
298 - width: 100%;
299 - height: 100%;
300 - background-color: rgba(0,0,0,0.4);
301 -}
302 -
303 -.mxchat-modal-content {
304 - background-color: #fefefe;
305 - margin: 15% auto;
306 - padding: 20px;
307 - border: 1px solid #ddd;
308 - width: 70%;
309 - max-width: 600px;
310 - border-radius: 4px;
311 -}
312 -
313 -.mxchat-modal-close {
314 - color: #aaa;
315 - float: right;
316 - font-size: 28px;
317 - font-weight: bold;
318 - cursor: pointer;
319 -}
320 -
321 -.mxchat-modal-close:hover {
322 - color: black;
323 -}
324 -
325 -
326 -
327 -
328 -.mxchat-admin .button.button-secondary.mxchat-edit-button {
329 - background: #3498db;
330 - color: #fff;
331 - border-radius: 20px;
332 - padding: 0px 20px !important;
333 - font-size: 1rem;
334 - font-weight: 700;
335 - text-decoration: none;
336 - transition: all .2s;
337 - justify-content: center;
338 - align-items: center;
339 - box-shadow: 4px 4px #2980b9;
340 - cursor: pointer;
341 - margin-top: 10px;
342 - border: none;
343 - width: 100%;
344 -}
345 -
346 -
347 -.mxchat-admin .mxchat-intents-table .mxchat-delete-all {
348 - width: 100%;
349 -}
350 -
351 -.mxchat-admin .mxchat-intents-table .mxchat-save-button {
352 - max-width: 100% !important;
353 - width: 100% !important;
354 -}
355 -
356 -.mxchat-agents-banner {
357 - background-color: #fff;
358 - margin-bottom: 20px;
359 - border-radius: 4px;
360 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
361 - position: relative;
362 - margin-left: auto;
363 - margin-right: auto;
364 - padding: 0px 15px;
365 -}
366 -
367 -.mxchat-agents-banner::before {
368 - content: '';
369 - position: absolute;
370 - top: 0;
371 - left: 0px;
372 - width: 10px; /* Matches border-left width */
373 - height: 100%;
374 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); /* Gradient */
375 - border-radius: 4px 0 0 4px; /* Match overall border radius */
376 -}
377 -
378 -.mxchat-agents-banner p {
379 - font-size: 14px;
380 - line-height: 1.6;
381 - color: #444; /* Dark gray text */
382 - margin: 0;
383 - padding: 15px 10px;
384 -}
385 -
386 -.mxchat-agents-banner a {
387 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1); /* Gradient text */
388 - -webkit-background-clip: text;
389 - -webkit-text-fill-color: transparent; /* Makes gradient visible */
390 - font-weight: bold;
391 - text-decoration: none;
392 - transition: opacity 0.2s ease;
393 -}
394 -
395 -.mxchat-agents-banner a:hover {
396 - opacity: 0.8; /* Subtle fade on hover */
397 - text-decoration: underline; /* Underline for accessibility */
398 -}
399 -
400 -
401 -
402 -.mxchat-timestamp {
403 - font-size: 10px;
404 - color: #8c8f94;
405 - margin-top: 2px;
406 - padding: 0 8px;
407 -}
408 -
409 -.mxchat-messages::-webkit-scrollbar {
410 - width: 6px;
411 -}
412 -
413 -.mxchat-messages::-webkit-scrollbar-track {
414 - background: #f1f1f1;
415 -}
416 -
417 -.mxchat-messages::-webkit-scrollbar-thumb {
418 - background: #888;
419 - border-radius: 3px;
420 -}
421 -
422 -
423 -
424 -
425 -
426 -
427 -
428 -
429 -
430 -.mxchat-process-status {
431 - margin-top: 20px;
432 - padding: 15px;
433 - background: #fff;
434 - border: 1px solid #ddd;
435 - border-radius: 4px;
436 - box-shadow: 0 1px 3px rgba(0,0,0,0.1);
437 -}
438 -
439 -.mxchat-process-status h3 {
440 - margin: 0 0 15px 0;
441 - color: #23282d;
442 - font-size: 14px;
443 - font-weight: 600;
444 -}
445 -
446 -.mxchat-process-status p {
447 - margin: 8px 0;
448 - color: #555;
449 - font-size: 13px;
450 -}
451 -
452 -.mxchat-process-status .status-complete {
453 - color: #46b450;
454 - font-weight: 500;
455 -}
456 -
457 -.mxchat-process-status.complete {
458 - border-color: #46b450;
459 -}
460 -
461 -
462 -
463 -
464 -
465 -/* Toggle Switch Styles */
466 -.mxchat-switch {
467 - position: relative;
468 - display: inline-block;
469 - width: 60px;
470 - height: 34px;
471 - margin-right: 10px;
472 -}
473 -
474 -.mxchat-switch input {
475 - opacity: 0;
476 - width: 0;
477 - height: 0;
478 -}
479 -
480 -.mxchat-slider {
481 - position: absolute;
482 - cursor: pointer;
483 - top: 0;
484 - left: 0;
485 - right: 0;
486 - bottom: 0;
487 - background-color: #ccc;
488 - transition: .4s;
489 - border-radius: 34px;
490 -}
491 -
492 -.mxchat-slider:before {
493 - position: absolute;
494 - content: "";
495 - height: 26px;
496 - width: 26px;
497 - left: 4px;
498 - bottom: 4px;
499 - background-color: white;
500 - transition: .4s;
501 - border-radius: 50%;
502 -}
503 -
504 -input:checked + .mxchat-slider {
505 - background-color: #2196F3;
506 -}
507 -
508 -input:disabled + .mxchat-slider {
509 - opacity: 0.5;
510 - cursor: not-allowed;
511 -}
512 -
513 -input:checked + .mxchat-slider:before {
514 - transform: translateX(26px);
515 -}
516 -
517 -.mxchat-status-label {
518 - display: inline-block;
519 - vertical-align: middle;
520 - margin-left: 10px;
521 -}
522 -
523 -.status-text {
524 - font-weight: 500;
525 -}
526 -
527 -
528 -
529 -
530 -.mxchat-question-row {
531 - margin-bottom: 10px;
532 -}
533 -
534 1 .mxchat-similarity-threshold .mxchat-slider-container {
535 2 display: flex;
536 3 align-items: center;
537 4 gap: 15px;
@@ -597,8 +64,11 @@
597 64 }
598 65 .description {
599 66 margin-top: -10px;
600 67 }
68 +.mxchat-search-group {
69 + margin-top: 20px;
70 +}
601 71
602 72 .tablenav .tablenav-pages {
603 73 display: flex;
604 74 align-items: center;
@@ -622,8 +92,9 @@
622 92 padding: 20px;
623 93 background: #f9f9f9;
624 94 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
625 95 }
96 +
626 97 /* Header */
627 98 .mxchat-admin .wrap h2 {
628 99 border-bottom: 2px solid #ddd;
629 100 padding-bottom: 10px;
@@ -657,9 +128,8 @@
657 128 background: #fff;
658 129 border: 1px solid #ddd;
659 130 box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
660 131 padding: 20px;
661 - border-radius: 10px;
662 132 }
663 133
664 134 /* Full Width for Submit Content */
665 135 .mxchat-admin .mxchat-grid-item.full-width {
@@ -680,9 +150,8 @@
680 150 }
681 151
682 152 .mxchat-admin .mxchat-form-group input[type="url"],
683 153 .mxchat-admin .mxchat-form-group input[type="text"],
684 -.mxchat-admin .mxchat-form-group input[type="password"],
685 154 .mxchat-admin .mxchat-form-group textarea {
686 155 padding: 10px;
687 156 border: 1px solid #ddd;
688 157 border-radius: 4px;
@@ -715,19 +184,8 @@
715 184 border: none;
716 185 cursor: pointer;
717 186 }
718 187
719 -.mxchat-search-group .button.button-primary.search-button {
720 - box-shadow: none;
721 - border-radius: 0px 20px 20px 0px;
722 - margin-bottom: 0px;
723 - padding: 0px 15px;
724 -}
725 -
726 -.mxchat-search-group .button.button-primary.search-button:hover {
727 - opacity: .8px;
728 -}
729 -
730 188 .mxchat-admin .button.button-primary:hover,
731 189 .mxchat-admin .button.button-primary:active {
732 190 background: #444;
733 191 }
@@ -732,33 +190,23 @@
732 190 background: #444;
733 191 }
734 192
735 193 .submit-content-button {
736 - margin-top: 10px !important;
194 + margin-top: 10px !important;
737 195 }
738 196
739 197 /* Search and Sitemap Group */
740 198 .mxchat-admin .mxchat-search-group {
741 199 display: flex;
742 - gap: 0px;
743 - max-width: 800px;
744 - margin: auto;
745 - margin-top: 20px;
746 - align-items: stretch;
747 - flex-direction: row;
200 + align-items: center;
201 + gap: 10px;
748 202 }
749 203
750 204 .mxchat-admin .mxchat-search-group input[type="text"],
751 205 .mxchat-admin .mxchat-search-group input[type="url"] {
752 206 flex-grow: 1;
753 - border-radius: 20px 0px 0px 20px;
754 - padding: 8px;
755 207 }
756 208
757 -.mxchat-search-group #mxchat-intent-search {
758 - border-radius: 0px 0px 0px 0px;
759 -}
760 -
761 209 .mxchat-admin .mxchat-search-group input[type="submit"] {
762 210 background: #212121;
763 211 color: #fff;
764 212 border-radius: 20px;
@@ -774,13 +222,13 @@
774 222 .mxchat-admin .mxchat-search-group input[type="submit"]:hover {
775 223 background-color: #444;
776 224 }
777 225
778 -.mxchat-admin .mxchat-delete-all, .button.button-link-delete.mxchat-delete-all {
226 +.mxchat-admin .mxchat-delete-all {
779 227 background: #e74c3c;
780 228 color: #fff;
781 229 border-radius: 20px;
782 - padding: 0px 15px !important;
230 + padding: 10px 20px !important;
783 231 font-size: 1rem;
784 232 font-weight: 700;
785 233 text-decoration: none;
786 234 transition: all .2s;
@@ -787,9 +235,9 @@
787 235 justify-content: center;
788 236 align-items: center;
789 237 box-shadow: 4px 4px #c0392b;
790 238 cursor: pointer;
791 - margin-bottom: 10px;
239 + margin-top: 10px;
792 240 border: none;
793 241 }
794 242
795 243 .mxchat-admin .mxchat-delete-all:hover {
@@ -849,32 +297,19 @@
849 297 }
850 298
851 299 .mxchat-admin .mxchat-pro-banner {
852 300 background-color: #fff;
853 - padding: 0px 15px;
301 + border-left: 4px solid #212121;
302 + padding: 15px;
854 303 margin-bottom: 20px;
855 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
856 - position: relative; /* Required for the ::before pseudo-element */
304 + box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
857 305 }
858 306
859 -.mxchat-admin .mxchat-pro-banner::before {
860 - content: '';
861 - position: absolute;
862 - top: 0;
863 - left: 0px;
864 - width: 10px; /* Matches the border-left width in your original CSS */
865 - height: 100%;
866 - background-color: #212121; /* Dark bar color */
867 - border-radius: 4px 0 0 4px; /* Rounded corners on the left */
868 -}
869 -
870 -
871 307 .mxchat-admin .mxchat-pro-banner p {
872 308 margin: 0;
873 309 font-size: 16px;
874 310 color: #212121;
875 - padding: 15px 10px;
876 - }
311 +}
877 312
878 313 .mxchat-admin .mxchat-pro-banner a {
879 314 color: #212121;
880 315 text-decoration: none;
@@ -940,10 +375,10 @@
940 375 margin-bottom: 20px;
941 376 }
942 377
943 378 .mxchat-loading-text {
944 - display: none;
945 - margin-top: 10px;
379 + display: none;
380 + margin-top: 10px;
946 381 color: #333;
947 382 }
948 383
949 384 .mxchat-spinner {
@@ -975,9 +410,26 @@
975 410 justify-content: center;
976 411 align-items: center;
977 412 }
978 413
414 +#mxchat-intent-loading {
415 + border: 8px solid #f3f3f3;
416 + border-top: 8px solid #333;
417 + border-radius: 50%;
418 + width: 30px;
419 + height: 30px;
420 + animation: mxchat-spin 1s linear infinite;
421 + display: inline-block; /* Display as inline for better alignment */
422 + margin-left: 10px;
423 + vertical-align: middle;
424 +}
979 425
426 +#mxchat-intent-loading-text {
427 + display: none;
428 + margin-top: 10px;
429 + color: #333;
430 +}
431 +
980 432 #mxchat-activation-spinner {
981 433 border: 4px solid #f3f3f3;
982 434 border-top: 4px solid #007cba; /* Match the WordPress primary button color */
983 435 border-radius: 50%;
@@ -995,8 +447,14 @@
995 447 }
996 448
997 449
998 450
451 +
452 +.pro-feature-wrapper {
453 + position: relative;
454 + display: inline-block;
455 +}
456 +
999 457 .pro-feature-wrapper.active select,
1000 458 .pro-feature-wrapper.active textarea {
1001 459 opacity: 1; /* Fully opaque when active */
1002 460 }
@@ -1032,8 +490,15 @@
1032 490 height: 100%;
1033 491 z-index: 10; /* Ensure the link is above everything else */
1034 492 }
1035 493
494 +/* Transcripts Layout */
495 +#mxchat-transcripts {
496 + display: flex;
497 + flex-wrap: wrap;
498 + gap: 20px;
499 + justify-content: flex-start;
500 +}
1036 501
1037 502 .mxchat-admin .chat-session {
1038 503 border: 1px solid #ddd;
1039 504 padding: 15px;
@@ -1084,11 +549,12 @@
1084 549 text-decoration: none;
1085 550 transition: all .2s;
1086 551 justify-content: center;
1087 552 align-items: center;
553 + box-shadow: 4px 4px #c0392b;
1088 554 cursor: pointer;
555 + margin-top: 10px;
1089 556 border: none;
1090 - line-height: 1;
1091 557 }
1092 558
1093 559
1094 560 .mxchat-controls .delete-chats-button.button:hover {
@@ -1110,9 +576,8 @@
1110 576 .mxchat-nav-tab-wrapper {
1111 577 margin: 0px 0px;
1112 578 padding: 0px 0px;
1113 579 display: flex;
1114 - padding-left: 20px;
1115 580 }
1116 581
1117 582 .mxchat-nav-tab {
1118 583 font-size: 14px;
@@ -1128,9 +593,9 @@
1128 593 }
1129 594
1130 595 .mxchat-nav-tab:hover, .mxchat-nav-tab:focus {
1131 596 background: #fff;
1132 - color: #0073aa;
597 + color: #0073aa;
1133 598 box-shadow: none;
1134 599 }
1135 600
1136 601 .mxchat-nav-tab-active {
@@ -1138,10 +603,15 @@
1138 603 border-bottom: 1px solid #fff;
1139 604 color: #0073aa;
1140 605 }
1141 606
607 +.mxchat-tab-content {
608 + display: none;
609 + padding: 20px;
610 + background: #fff;
611 + border: 1px solid #ddd;
612 +}
1142 613
1143 -
1144 614 .mxchat-tab-content.active {
1145 615 display: block;
1146 616 }
1147 617
@@ -1211,9 +681,9 @@
1211 681 background-color: #fff;
1212 682 }
1213 683
1214 684 /* ID column should be small */
1215 -.mxchat-table td:nth-child(1),
685 +.mxchat-table td:nth-child(1),
1216 686 .mxchat-table th:nth-child(1) {
1217 687 width: 15%; /* ID column */
1218 688 text-align: center;
1219 689 }
@@ -1218,15 +688,15 @@
1218 688 text-align: center;
1219 689 }
1220 690
1221 691 /* Content column should be wide */
1222 -.mxchat-table td:nth-child(2),
692 +.mxchat-table td:nth-child(2),
1223 693 .mxchat-table th:nth-child(2) {
1224 694 width: 50%; /* Content column */
1225 695 }
1226 696
1227 697 /* URL column */
1228 -.mxchat-table td:nth-child(3),
698 +.mxchat-table td:nth-child(3),
1229 699 .mxchat-table th:nth-child(3) {
1230 700 width: 20%; /* URL column */
1231 701 text-align: left;
1232 702 overflow-x: auto; /* Allow the URL to scroll horizontally if it's too long */
@@ -1233,9 +703,9 @@
1233 703 white-space: nowrap;
1234 704 }
1235 705
1236 706 /* Actions column */
1237 -.mxchat-table td:nth-child(4),
707 +.mxchat-table td:nth-child(4),
1238 708 .mxchat-table th:nth-child(4) {
1239 709 width: 15%; /* Edit/Delete column */
1240 710 text-align: center;
1241 711 }
@@ -1271,15 +741,15 @@
1271 741 background-color: #fff;
1272 742 }
1273 743
1274 744 /* Intent Label column */
1275 -.mxchat-intents-table td:nth-child(1),
745 +.mxchat-intents-table td:nth-child(1),
1276 746 .mxchat-intents-table th:nth-child(1) {
1277 - width: 20%;
747 + width: 20%;
1278 748 }
1279 749
1280 750 /* Phrases column */
1281 -.mxchat-intents-table td:nth-child(2),
751 +.mxchat-intents-table td:nth-child(2),
1282 752 .mxchat-intents-table th:nth-child(2) {
1283 753 width: 30%;
1284 754 overflow-x: auto;
1285 755 }
@@ -1284,15 +754,15 @@
1284 754 overflow-x: auto;
1285 755 }
1286 756
1287 757 /* Callback Function column */
1288 -.mxchat-intents-table td:nth-child(3),
758 +.mxchat-intents-table td:nth-child(3),
1289 759 .mxchat-intents-table th:nth-child(3) {
1290 760 width: 20%;
1291 761 }
1292 762
1293 763 /* Similarity Threshold column */
1294 -.mxchat-intents-table td:nth-child(4),
764 +.mxchat-intents-table td:nth-child(4),
1295 765 .mxchat-intents-table th:nth-child(4) {
1296 766 width: 15%;
1297 767 text-align: center;
1298 768 }
@@ -1297,9 +767,9 @@
1297 767 text-align: center;
1298 768 }
1299 769
1300 770 /* Actions column */
1301 -.mxchat-intents-table td:nth-child(5),
771 +.mxchat-intents-table td:nth-child(5),
1302 772 .mxchat-intents-table th:nth-child(5) {
1303 773 width: 15%;
1304 774 text-align: center;
1305 775 }
@@ -1390,17 +860,23 @@
1390 860
1391 861 .mxchat-admin .mxchat-grid-item.full-width {
1392 862 grid-column: span 1;
1393 863 }
1394 -
864 +
1395 865 .mxchat-admin .chat-session {
1396 866 width: calc(100% - 0px);
1397 867 }
1398 -
868 +
1399 869 .mxchat-nav-tab {
1400 870 padding: 10px 12px;
1401 871 }
1402 -
872 +
873 + /* Search and Sitemap Group */
874 + .mxchat-admin .mxchat-search-group {
875 + align-items: normal;
876 + flex-direction: column;
877 + }
878 +
1403 879 .mxchat-admin .mxchat-nav-tab-wrapper,
1404 880 .mxchat-admin .wrap h2.mxchat-nav-tab-wrapper,
1405 881 .mxchat-admin h1.mxchat-nav-tab-wrapper {
1406 882 border-bottom: 0;
@@ -1410,1408 +886,8 @@
1410 886
1411 887 .mxchat-admin .mxchat-nav-tab-wrapper .mxchat-nav-tab {
1412 888 margin: 0;
1413 889 }
1414 - .mxchat-nav-tab-wrapper {
1415 - padding-left: 0px;
1416 - }
1417 -
1418 - .mxchat-session {
1419 - width: 100%;
1420 - }
1421 -
1422 -
1423 -}
1424 -
1425 -
1426 -/* Basic responsive table styles */
1427 -@media screen and (max-width: 782px) {
1428 - .mxchat-intents-table {
1429 - display: block;
1430 - width: 100%;
1431 - }
1432 -
1433 - .mxchat-intents-table thead {
1434 - display: none; /* Hide header on mobile */
1435 - }
1436 -
1437 - .mxchat-intents-table tbody,
1438 - .mxchat-intents-table tr,
1439 - .mxchat-intents-table td {
1440 - display: block;
1441 - width: 100%;
1442 - }
1443 -
1444 - .mxchat-intents-table tr {
1445 - margin-bottom: 1.5rem;
1446 - background: #fff;
1447 - padding: 1rem;
1448 - border-radius: 8px;
1449 - box-shadow: 0 1px 3px rgba(0,0,0,0.1);
1450 - max-width: 300px;
1451 - }
1452 -
1453 - /* Add labels before content */
1454 - .mxchat-intents-table td:before {
1455 - content: attr(data-label);
1456 - font-weight: 600;
1457 - display: block;
1458 - margin-bottom: 0.5rem;
1459 - color: #1d2327;
1460 - }
1461 -
1462 - /* Spacing between cells */
1463 - .mxchat-intents-table td {
1464 - padding: 0.5rem 0;
1465 - border: none;
1466 - }
1467 -
1468 - /* Handle the slider container */
1469 - .mxchat-intents-table td:nth-child(4) {
1470 - margin: 1rem 0;
1471 - }
1472 -
1473 - /* Style the range input */
1474 - .mxchat-intents-table input[type="range"] {
1475 - width: 100%;
1476 - margin: 0.5rem 0;
1477 - }
1478 -
1479 - /* Style the actions column */
1480 - .mxchat-intents-table td:last-child {
1481 - display: flex;
1482 - flex-direction: column;
1483 - gap: 0.5rem;
1484 - margin-top: 1rem;
1485 - }
1486 -
1487 - /* Make buttons full width on mobile */
1488 - .mxchat-intents-table .mxchat-save-button,
1489 - .mxchat-intents-table .mxchat-edit-button,
1490 - .mxchat-intents-table .mxchat-delete-all {
1491 - width: 100%;
1492 - margin: 0;
1493 - }
1494 -
1495 - /* Adjust output display */
1496 - .mxchat-intents-table output {
1497 - display: block;
1498 - text-align: center;
1499 - margin-top: 0.25rem;
1500 - }
1501 -
1502 - /* Additional spacing for forms */
1503 - .mxchat-intents-table form {
1504 - margin: 0;
1505 - }
1506 -}
1507 -
1508 -/* Stats Grid */
1509 -.mxchat-stats-grid {
1510 - display: grid;
1511 - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1512 - gap: 20px;
1513 - margin-bottom: 30px;
1514 - margin-top: 20px;
1515 -}
1516 -
1517 -.mxchat-stat-card {
1518 - background: white;
1519 - padding: 20px;
1520 - border-radius: 10px;
1521 - box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1522 - display: flex;
1523 - align-items: center;
1524 - gap: 15px;
1525 -}
1526 -
1527 -.stat-icon {
1528 - font-size: 24px;
1529 - background: #f0f0f1;
1530 - width: 50px;
1531 - height: 50px;
1532 - display: flex;
1533 - align-items: center;
1534 - justify-content: center;
1535 - border-radius: 10px;
1536 -}
1537 -
1538 -.stat-content {
1539 - display: flex;
1540 - flex-direction: column;
1541 -}
1542 -
1543 -.stat-value {
1544 - font-size: 24px;
1545 - font-weight: bold;
1546 - color: #1d2327;
1547 -}
1548 -
1549 -.stat-label {
1550 - color: #50575e;
1551 - font-size: 14px;
1552 -}
1553 -
1554 -/* Controls Section */
1555 -.mxchat-controls-wrapper {
1556 - background: white;
1557 - padding: 20px;
1558 - border-radius: 10px;
1559 - box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1560 - margin-bottom: 20px;
1561 - display: flex;
1562 - justify-content: space-between;
1563 - align-items: center;
1564 - flex-wrap: wrap;
1565 - gap: 15px;
1566 -}
1567 -
1568 -.mxchat-controls {
1569 - display: flex;
1570 - gap: 15px;
1571 - align-items: center;
1572 -}
1573 -
1574 -.mxchat-search-box input {
1575 - padding: 8px 12px;
1576 - border-radius: 5px;
1577 - border: 1px solid #dcdcde;
1578 - width: 300px;
1579 -}
1580 -
1581 -/* Select/Delete Buttons */
1582 -.mxchat-select-button {
1583 - display: flex;
1584 - align-items: center;
1585 - gap: 8px;
1586 - padding: 8px 16px;
1587 - background: #fff;
1588 - border: 1px solid #0073aa;
1589 - border-radius: 4px;
1590 - color: #0073aa;
1591 - cursor: pointer;
1592 - transition: all 0.2s ease;
1593 -}
1594 -
1595 -.mxchat-select-button:hover {
1596 - background: #f0f7ff;
1597 -}
1598 -
1599 -.mxchat-select-button.selected {
1600 - background: #0073aa;
1601 - color: #fff;
1602 -}
1603 -
1604 -.mxchat-select-button .dashicons {
1605 - font-size: 18px;
1606 - width: 18px;
1607 - height: 18px;
1608 - transition: transform 0.2s ease;
1609 -}
1610 -
1611 -.mxchat-select-button.selected .dashicons {
1612 - transform: scale(1.2);
1613 -}
1614 -
1615 -.delete-chats-button {
1616 - display: flex !important;
1617 - align-items: center;
1618 - gap: 8px;
1619 - background: #dc3232 !important;
1620 - color: #fff !important;
1621 - border: none !important;
1622 - padding: 8px 16px !important;
1623 - border-radius: 4px !important;
1624 - cursor: pointer;
1625 - transition: all 0.2s ease !important;
1626 -}
1627 -
1628 -.delete-chats-button:hover {
1629 - background: #b32d2e !important;
1630 -}
1631 -
1632 -.delete-chats-button .dashicons {
1633 - font-size: 18px;
1634 - width: 18px;
1635 - height: 18px;
1636 -}
1637 -
1638 -/* Transcript Grid */
1639 -.mxchat-transcript {
1640 - display: grid;
1641 - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1642 - gap: 20px;
1643 -}
1644 -
1645 -/* Session Cards */
1646 -.mxchat-session {
1647 - background: white;
1648 - border-radius: 10px;
1649 - box-shadow: 0 2px 4px rgba(0,0,0,0.1);
1650 - overflow: hidden;
1651 - border: 1px solid #dcdcde;
1652 - display: flex;
1653 - flex-direction: column;
1654 -}
1655 -
1656 -.mxchat-session-header {
1657 - background: #f0f0f1;
1658 - padding: 15px;
1659 - border-bottom: 1px solid #dcdcde;
1660 -}
1661 -
1662 -.mxchat-messages {
1663 - padding: 15px;
1664 - max-height: 400px;
1665 - overflow-y: auto;
1666 - flex-grow: 1;
1667 - overflow-x: hidden;
1668 -}
1669 -
1670 -/* Message Styling */
1671 -.mxchat-message {
1672 - margin-bottom: 15px;
1673 - max-width: 85%;
1674 -}
1675 -
1676 -.mxchat-message.user-message {
1677 - margin-left: auto;
1678 -}
1679 -
1680 -.mxchat-message-content {
1681 - padding: 10px 15px;
1682 - border-radius: 15px;
1683 - margin: 5px 0;
1684 -}
1685 -
1686 -.user-message .mxchat-message-content {
1687 - background: #0073aa;
1688 - color: white;
1689 - border-radius: 18px 0 18px 18px;
1690 -}
1691 -
1692 -.bot-message .mxchat-message-content {
1693 - background: #f0f0f1;
1694 - border-radius: 0 18px 18px;
1695 -}
1696 -
1697 -.mxchat-timestamp {
1698 - font-size: 12px;
1699 - color: #50575e;
1700 -}
1701 -
1702 -/* Responsive Design */
1703 -@media (max-width: 782px) {
1704 - .mxchat-controls-wrapper {
1705 - flex-direction: column;
1706 - align-items: stretch;
1707 - }
1708 -
1709 - .mxchat-controls {
1710 - flex-direction: column;
1711 - width: 100%;
1712 - }
1713 -
1714 - .mxchat-search-box input {
1715 - width: 100%;
1716 - }
1717 -
1718 - .mxchat-transcript {
1719 - grid-template-columns: 1fr;
1720 - }
1721 -
1722 - .mxchat-select-button,
1723 - .delete-chats-button {
1724 - width: 100%;
1725 - justify-content: center;
1726 - }
1727 -}
1728 -
1729 -
1730 -
1731 -
1732 -
1733 -
1734 -
1735 -
1736 -
1737 -
1738 -
1739 -
1740 -
1741 -
1742 -
1743 -
1744 -/* Form Table Layout */
1745 -.form-table {
1746 - border-collapse: separate;
1747 - border-spacing: 0 20px;
1748 - margin-top: -20px; /* Compensate for border-spacing */
1749 - width: 100%;
1750 -}
1751 -
1752 -.form-table th {
1753 - padding: 20px 10px 20px 0;
1754 - width: 200px;
1755 - vertical-align: top;
1756 - font-weight: 600;
1757 - color: #1d2327;
1758 -}
1759 -
1760 -.form-table td {
1761 - padding: 15px 10px;
1762 - vertical-align: top;
1763 -}
1764 -
1765 -/* Input Styling */
1766 -.form-table input[type="text"],
1767 -.form-table input[type="password"],
1768 -.form-table textarea,
1769 -.form-table select {
1770 - width: 100%;
1771 - max-width: 500px;
1772 - padding: 8px 12px;
1773 - border: 1px solid #dcdcde;
1774 - border-radius: 4px;
1775 - background-color: #fff;
1776 - transition: all 0.2s ease;
1777 -}
1778 -
1779 -.form-table input[type="text"]:focus,
1780 -.form-table input[type="password"]:focus,
1781 -.form-table textarea:focus,
1782 -.form-table select:focus {
1783 - border-color: #2271b1;
1784 - box-shadow: 0 0 0 1px #2271b1;
1785 - outline: none;
1786 -}
1787 -
1788 -/* Range Input Styling */
1789 -input[type="range"] {
1790 - -webkit-appearance: none;
1791 - width: 200px;
1792 - height: 4px;
1793 - background: #dcdcde;
1794 - border-radius: 2px;
1795 - vertical-align: middle;
1796 -}
1797 -
1798 -input[type="range"]::-webkit-slider-thumb {
1799 - -webkit-appearance: none;
1800 - height: 16px;
1801 - width: 16px;
1802 - border-radius: 50%;
1803 - background: #2271b1;
1804 - cursor: pointer;
1805 - transition: all 0.2s ease;
1806 -}
1807 -
1808 -input[type="range"]::-webkit-slider-thumb:hover {
1809 - transform: scale(1.1);
1810 -}
1811 -
1812 -#mxchat_threshold_value {
1813 - display: inline-block;
1814 - padding: 4px 8px;
1815 - background: #2271b1;
1816 - color: white;
1817 - border-radius: 4px;
1818 - margin-left: 10px;
1819 - font-size: 12px;
1820 - min-width: 30px;
1821 - text-align: center;
1822 -}
1823 -
1824 -/* Toggle Switch */
1825 -.toggle-switch {
1826 - position: relative;
1827 - display: inline-block;
1828 - width: 50px;
1829 - height: 24px;
1830 -}
1831 -
1832 -.toggle-switch input {
1833 - opacity: 0;
1834 - width: 0;
1835 - height: 0;
1836 -}
1837 -
1838 -.slider {
1839 - position: absolute;
1840 - cursor: pointer;
1841 - top: 0;
1842 - left: 0;
1843 - right: 0;
1844 - bottom: 0;
1845 - background-color: #ccc;
1846 - transition: .4s;
1847 - border-radius: 24px;
1848 -}
1849 -
1850 -.slider:before {
1851 - position: absolute;
1852 - content: "";
1853 - height: 18px;
1854 - width: 18px;
1855 - left: 3px;
1856 - bottom: 3px;
1857 - background-color: white;
1858 - transition: .4s;
1859 - border-radius: 50%;
1860 -}
1861 -
1862 -input:checked + .slider {
1863 - background-color: #2271b1;
1864 -}
1865 -
1866 -input:checked + .slider:before {
1867 - transform: translateX(26px);
1868 -}
1869 -
1870 -/* Description Text */
1871 -.description {
1872 - margin-top: 8px;
1873 - color: #646970;
1874 - font-style: italic;
1875 - font-size: 13px;
1876 -}
1877 -
1878 -/* Show/Hide Password Button */
1879 -button[id^="toggleApiKey"],
1880 -button[id^="toggleXaiKey"],
1881 -button[id^="toggleClaudeKey"] {
1882 - margin-left: 10px;
1883 - padding: 4px 12px;
1884 - background: #f0f0f1;
1885 - border: 1px solid #c3c4c7;
1886 - border-radius: 3px;
1887 - cursor: pointer;
1888 - transition: all 0.2s ease;
1889 -}
1890 -
1891 -button[id^="toggleApiKey"]:hover,
1892 -button[id^="toggleXaiKey"]:hover,
1893 -button[id^="toggleClaudeKey"]:hover {
1894 - background: #e5e5e5;
1895 -}
1896 -
1897 -/* Additional Questions Section */
1898 -.mxchat-question-row {
1899 - display: flex;
1900 - gap: 10px;
1901 - margin-bottom: 10px;
1902 - align-items: center;
1903 -}
1904 -
1905 -.mxchat-question-row input {
1906 - flex: 1;
1907 -}
1908 -
1909 -.mxchat-remove-question,
1910 -.mxchat-add-question {
1911 - padding: 4px 12px !important;
1912 - height: auto !important;
1913 -}
1914 -
1915 -.mxchat-remove-question {
1916 - background: #dc3232 !important;
1917 - color: white !important;
1918 - border: none !important;
1919 -}
1920 -
1921 -.mxchat-add-question {
1922 - background: #2271b1 !important;
1923 - color: white !important;
1924 - border: none !important;
1925 - margin-top: 10px;
1926 -}
1927 -
1928 -/* Pro Feature Wrapper */
1929 -.pro-feature-wrapper {
1930 - position: relative;
1931 -}
1932 -
1933 -.pro-feature-wrapper.inactive {
1934 - opacity: 0.7;
1935 -}
1936 -
1937 -/* Responsive Design */
1938 -@media screen and (max-width: 782px) {
1939 - .form-table td {
1940 - padding-left: 0;
1941 - }
1942 -
1943 - .form-table input[type="text"],
1944 - .form-table input[type="password"],
1945 - .form-table textarea,
1946 - .form-table select {
1947 - max-width: 100%;
1948 - }
1949 -
1950 - .form-table th {
1951 - padding-bottom: 5px;
1952 - }
1953 -
1954 - .mxchat-question-row {
1955 - flex-direction: column;
1956 - gap: 5px;
1957 - }
1958 -
1959 - input[type="range"] {
1960 - width: 100%;
1961 - max-width: 300px;
1962 - }
1963 -}
1964 -
1965 -/* Section Headers */
1966 -.mxchat-tab-content h2 {
1967 - font-size: 1.5em;
1968 - padding-bottom: 15px;
1969 - margin-bottom: 25px;
1970 - border-bottom: 2px solid #f0f0f1;
1971 - color: #1d2327;
1972 -}
1973 -
1974 -/* Grouped Settings */
1975 -.form-table tr:not(:last-child) {
1976 - border-bottom: 1px solid #f0f0f1;
1977 -}
1978 -
1979 -/* Show/Hide Button - Universal Selector for all toggle buttons */
1980 -button[id^="toggle"] {
1981 - padding: 8px 16px;
1982 - background: #f0f0f1;
1983 - border: 1px solid #dcdcde;
1984 - border-radius: 4px;
1985 - cursor: pointer;
1986 - color: #1d2327;
1987 - font-size: 13px;
1988 - font-weight: 500;
1989 - transition: all 0.2s ease;
1990 - white-space: nowrap;
1991 - height: 36px;
1992 - min-width: 80px;
1993 - margin-left: 10px;
1994 -}
1995 -
1996 -/* Specific selectors for backward compatibility */
1997 -button[id^="toggleApiKey"],
1998 -button[id^="toggleXaiApiKey"],
1999 -button[id^="toggleClaudeApiKey"],
2000 -button[id^="toggleWooCommerceSecretVisibility"],
2001 -button[id^="toggleBraveApiKeyVisibility"],
2002 -button[id^="toggleLoopsApiKeyVisibility"],
2003 -button[id^="toggleWebhookUrlVisibility"],
2004 -button[id^="toggleSecretKeyVisibility"],
2005 -button[id^="toggleBotTokenVisibility"] {
2006 - padding: 8px 16px;
2007 - background: #f0f0f1;
2008 - border: 1px solid #dcdcde;
2009 - border-radius: 4px;
2010 - cursor: pointer;
2011 - color: #1d2327;
2012 - font-size: 13px;
2013 - font-weight: 500;
2014 - transition: all 0.2s ease;
2015 - white-space: nowrap;
2016 - height: 36px;
2017 - min-width: 80px;
2018 - margin-left: 10px;
2019 -}
2020 -
2021 -/* Hover state for all toggle buttons */
2022 -button[id^="toggle"]:hover {
2023 - background: #e5e5e5;
2024 - border-color: #c3c4c7;
2025 -}
2026 -
2027 -/* Active state for all toggle buttons */
2028 -button[id^="toggle"]:active {
2029 - background: #dcdcde;
2030 - border-color: #c3c4c7;
2031 - transform: translateY(1px);
2032 -}
2033 -
2034 -/* Responsive Design */
2035 -@media screen and (max-width: 782px) {
2036 - .pro-feature-wrapper {
2037 - flex-wrap: wrap;
2038 - }
2039 -
2040 - /* Make all toggle buttons full width on mobile */
2041 - button[id^="toggle"] {
2042 - width: 100%;
2043 - margin-left: 0;
2044 - margin-top: 10px;
2045 - }
2046 - .mxchat-remove-question {
2047 - width: 100%;
2048 - }
2049 -}
2050 -
2051 -
2052 -
2053 -
2054 -
2055 -
2056 -
2057 -
2058 -
2059 -
2060 -
2061 -.mxchat-flex-section h2 {
2062 - margin: 0 0 1rem;
2063 - padding-bottom: 0.5rem;
2064 - border-bottom: 1px solid #eee;
2065 -}
2066 -
2067 -.mxchat-sync-settings,
2068 -.mxchat-import-section {
2069 - flex: 1;
2070 -}
2071 -
2072 -.mxchat-toggle-group {
2073 - display: flex;
2074 - flex-direction: column;
2075 - gap: 0.75rem;
2076 -}
2077 -
2078 -.mxchat-toggle-container {
2079 - display: flex;
2080 - align-items: center;
2081 - gap: 0.75rem;
2082 -}
2083 -
2084 -.mxchat-toggle-switch {
2085 - position: relative;
2086 - display: inline-block;
2087 - width: 44px;
2088 - height: 22px;
2089 -}
2090 -
2091 -.mxchat-toggle-slider {
2092 - position: absolute;
2093 - cursor: pointer;
2094 - top: 0;
2095 - left: 0;
2096 - right: 0;
2097 - bottom: 0;
2098 - background-color: #ccc;
2099 - transition: .4s;
2100 - border-radius: 22px;
2101 -}
2102 -
2103 -.mxchat-toggle-slider:before {
2104 - position: absolute;
2105 - content: "";
2106 - height: 18px;
2107 - width: 18px;
2108 - left: 2px;
2109 - bottom: 2px;
2110 - background-color: white;
2111 - transition: .4s;
2112 - border-radius: 50%;
2113 -}
2114 -
2115 -input:checked + .mxchat-toggle-slider {
2116 - background-color: #2196F3;
2117 -}
2118 -
2119 -input:checked + .mxchat-toggle-slider:before {
2120 - transform: translateX(22px);
2121 -}
2122 -
2123 -.mxchat-url-input-group {
2124 - display: flex;
2125 - gap: 0.5rem;
2126 -}
2127 -
2128 -.mxchat-url-input-group input[type="url"] {
2129 - flex: 1;
2130 -}
2131 -
2132 -.mxchat-status-section {
2133 - margin-top: 1rem;
2134 - padding-top: 1rem;
2135 - border-top: 1px solid #eee;
2136 -}
2137 -
2138 -.mxchat-process-status {
2139 - background: #f8f9fa;
2140 - border-radius: 4px;
2141 - padding: 1rem;
2142 - margin-bottom: 1rem;
2143 -}
2144 -
2145 -.status-header {
2146 - display: flex;
2147 - justify-content: space-between;
2148 - align-items: center;
2149 - margin-bottom: 0.5rem;
2150 -}
2151 -
2152 -.status-header h4 {
2153 - margin: 0;
2154 -}
2155 -
2156 -.progress-bar {
2157 - background: #eee;
2158 - border-radius: 4px;
2159 - height: 8px;
2160 - margin-bottom: 0.5rem;
2161 -}
2162 -
2163 -.progress {
2164 - background: #2196F3;
2165 - height: 100%;
2166 - border-radius: 4px;
2167 - transition: width 0.3s ease;
2168 -}
2169 -
2170 -.status-details {
2171 - display: flex;
2172 - justify-content: space-between;
2173 - font-size: 0.9em;
2174 - color: #666;
2175 -}
2176 -
2177 -.save-button-settings {
2178 - background: #3498db !important;
2179 - color: #fff !important;
2180 - border-radius: 20px !important;
2181 - padding: 0px 20px !important;
2182 - font-size: 1rem !important;
2183 - font-weight: 700 !important;
2184 - text-decoration: none !important;
2185 - transition: all .2s !important;
2186 - box-shadow: 4px 4px #2980b9 !important;
2187 - cursor: pointer !important;
2188 - margin-top: 10px !important;
2189 - border: none !important;
2190 - margin-bottom: 10px !important;
2191 -}
2192 -
2193 -.mxchat-import-description {
2194 - margin-bottom: 1rem;
2195 -}
2196 -
2197 -.description-text {
2198 - margin: 0 0 0.5rem;
2199 - color: #666;
2200 -}
2201 -
2202 -.import-options {
2203 - margin: 0 0 1rem;
2204 - padding-left: 1.5rem;
2205 -}
2206 -
2207 -.import-options li {
2208 - margin-bottom: 0.25rem;
2209 - color: #666;
2210 -}
2211 -
2212 -.import-options strong {
2213 - color: #333;
2214 -}
2215 -
2216 -.import-section {
2217 - margin-top: 50px;
2218 -}
2219 -
2220 -
2221 -/* Mobile Responsiveness */
2222 -@media screen and (max-width: 782px) {
2223 - .mxchat-settings-row {
2224 - flex-direction: column;
2225 - }
2226 - .mxchat-url-input-group input[type="submit"] {
2227 - width: 100%;
2228 - }
2229 -}
2230 -
2231 -
2232 -
2233 -
2234 -
2235 -/* Feedback container for saving indicator */
2236 -.feedback-container {
2237 - display: inline-flex;
2238 - align-items: right;
2239 - margin-left: 10px;
2240 - position: relative;
2241 - z-index: 2;
2242 -}
2243 -
2244 -/* Spinner animation */
2245 -.saving-spinner {
2246 - width: 16px;
2247 - height: 16px;
2248 - border: 2px solid #ccc;
2249 - border-top-color: #007cba; /* WordPress blue */
2250 - border-radius: 50%;
2251 - animation: spin 0.6s linear infinite;
2252 -}
2253 -
2254 -/* Checkmark icon */
2255 -.success-icon {
2256 - display: none;
2257 - color: #28a745; /* Green for success */
2258 - font-size: 16px;
2259 - font-weight: bold;
2260 - margin-left: 5px;
2261 - animation: fadeInOut 1.5s ease-in-out forwards;
2262 -}
2263 -
2264 -/* Spinner animation keyframes */
2265 -@keyframes spin {
2266 - to {
2267 - transform: rotate(360deg);
2268 - }
2269 -}
2270 -
2271 -/* Success icon fade animation */
2272 -@keyframes fadeInOut {
2273 - 0% {
2274 - opacity: 0;
2275 - }
2276 - 20% {
2277 - opacity: 1;
2278 - }
2279 - 80% {
2280 - opacity: 1;
2281 - }
2282 - 100% {
2283 - opacity: 0;
2284 - }
2285 -}
2286 -
2287 -
2288 -.slider-container {
2289 - display: flex;
2290 - align-items: center;
2291 - gap: 10px;
2292 - margin-bottom: 10px;
2293 -}
2294 -
2295 -.range-slider {
2296 - flex-grow: 1;
2297 - max-width: 300px;
2298 -}
2299 -
2300 -.range-value {
2301 - min-width: 30px;
2302 - text-align: center;
2303 -}
2304 -
2305 -/* Optional: Style the range input */
2306 -input[type="range"] {
2307 - -webkit-appearance: none;
2308 - width: 100%;
2309 - height: 8px;
2310 - background: #ddd;
2311 - border-radius: 4px;
2312 - outline: none;
2313 -}
2314 -
2315 -input[type="range"]::-webkit-slider-thumb {
2316 - -webkit-appearance: none;
2317 - width: 16px;
2318 - height: 16px;
2319 - background: #2271b1;
2320 - border-radius: 50%;
2321 - cursor: pointer;
2322 -}
2323 -
2324 -
2325 -
2326 -
2327 -
2328 -
2329 -
2330 -
2331 -
2332 -
2333 -
2334 -
2335 -
2336 -
2337 -
2338 -
2339 -
2340 -/* Container Styles */
2341 -.mxchat-import-container {
2342 - background: #fff;
2343 - padding: 20px;
2344 - border: 1px solid #e1e1e1;
2345 - border-radius: 10px;
2346 - box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
2347 -}
2348 -
2349 -
2350 -
2351 -/* Tabs Navigation */
2352 -.mxchat-tabs {
2353 - display: flex;
2354 - border-bottom: 2px solid #e1e1e1;
2355 - margin-bottom: 20px;
2356 -}
2357 -.mxchat-tab-button {
2358 - padding: 10px 20px;
2359 - cursor: pointer;
2360 - background: transparent;
2361 - border: none;
2362 - border-bottom: 2px solid transparent;
2363 - transition: all 0.3s ease;
2364 - font-size: 16px;
2365 - color: #333;
2366 -}
2367 -.mxchat-tab-button:hover,
2368 -.mxchat-tab-button:focus {
2369 - background: #f9f9f9;
2370 -}
2371 -.mxchat-tab-button.active {
2372 - border-bottom: 2px solid #0073aa;
2373 - font-weight: bold;
2374 - color: #0073aa;
2375 -}
2376 -
2377 -
2378 -
2379 -/* Flex Container for Default DB Tab */
2380 -.mxchat-flex-container {
2381 - display: flex;
2382 - gap: 20px;
2383 - flex-wrap: wrap;
2384 -}
2385 -.mxchat-sync-column,
2386 -.mxchat-import-column {
2387 - flex: 1;
2388 - min-width: 300px;
2389 -}
2390 -
2391 -/* Section Headings and Descriptions */
2392 -.mxchat-section h3 {
2393 - font-size: 18px;
2394 - margin-bottom: 10px;
2395 - color: #0073aa;
2396 -}
2397 -.mxchat-description {
2398 - font-size: 14px;
2399 - margin-bottom: 15px;
2400 - color: #555;
2401 -}
2402 -
2403 -/* Toggle Switches */
2404 -.mxchat-toggle-container {
2405 - display: flex;
2406 - align-items: center;
2407 - margin-bottom: 15px;
2408 -}
2409 -.mxchat-toggle-switch {
2410 - position: relative;
2411 - display: inline-block;
2412 - width: 50px;
2413 - height: 24px;
2414 - margin-right: 10px;
2415 -}
2416 -.mxchat-toggle-switch input {
2417 - opacity: 0;
2418 - width: 0;
2419 - height: 0;
2420 -}
2421 -.mxchat-toggle-slider {
2422 - position: absolute;
2423 - cursor: pointer;
2424 - top: 0;
2425 - left: 0;
2426 - right: 0;
2427 - bottom: 0;
2428 - background-color: #ccc;
2429 - transition: 0.4s;
2430 - border-radius: 24px;
2431 -}
2432 -.mxchat-toggle-switch input:checked + .mxchat-toggle-slider {
2433 - background-color: #212121;
2434 -}
2435 -.mxchat-toggle-slider:before {
2436 - position: absolute;
2437 - content: "";
2438 - height: 18px;
2439 - width: 18px;
2440 - left: 3px;
2441 - bottom: 3px;
2442 - background-color: white;
2443 - transition: 0.4s;
2444 - border-radius: 50%;
2445 -}
2446 -.mxchat-toggle-switch input:checked + .mxchat-toggle-slider:before {
2447 - transform: translateX(26px);
2448 -}
2449 -.mxchat-toggle-label {
2450 - font-size: 14px;
2451 - color: #333;
2452 -}
2453 -
2454 -/* Form Groups */
2455 -.mxchat-form-group {
2456 - margin-bottom: 15px;
2457 -}
2458 -.mxchat-form-group label {
2459 - display: block;
2460 - margin-bottom: 5px;
2461 - font-weight: bold;
2462 - color: #333;
2463 -}
2464 -
2465 -.mxchat-form-group .description {
2466 - font-size: 12px;
2467 - color: #777;
2468 -}
2469 -
2470 -/* URL and Pinecone Input Groups */
2471 -.mxchat-url-input-group,
2472 -.mxchat-pinecone-input-group {
2473 - display: flex;
2474 - gap: 0px;
2475 - margin-bottom: 15px;
2476 -}
2477 -.mxchat-url-input-group input[type="url"],
2478 -.mxchat-pinecone-input-group input[type="url"] {
2479 - flex: 1;
2480 - padding: 8px;
2481 - border: 1px solid #ccc;
2482 -border-radius: 4px 0px 0px 4px;
2483 -}
2484 -.mxchat-url-input-group input[type="submit"],
2485 -.mxchat-pinecone-input-group input[type="submit"] {
2486 - padding: 8px 16px;
2487 - background-color: #0073aa;
2488 - color: #fff;
2489 - border: none;
2490 - border-radius: 4px;
2491 - cursor: pointer;
2492 - transition: background-color 0.3s ease;
2493 -}
2494 -.mxchat-url-input-group input[type="submit"]:hover,
2495 -.mxchat-pinecone-input-group input[type="submit"]:hover {
2496 - background-color: #005177;
2497 -}
2498 -
2499 -/* Submit Wrapper */
2500 -.mxchat-submit-wrapper {
2501 - margin-top: 20px;
2502 -}
2503 -
2504 -/* Import & Pinecone Options List */
2505 -.import-options,
2506 -.pinecone-options {
2507 - margin: 10px 0 15px 20px;
2508 - color: #555;
2509 -}
2510 -.import-options li,
2511 -.pinecone-options li {
2512 - margin-bottom: 5px;
2513 -}
2514 -
2515 -/* Spinner Styles */
2516 -.mxchat-spinner,
2517 -.mxchat-pinecone-spinner {
2518 - border: 4px solid #f3f3f3;
2519 - border-top: 4px solid #0073aa;
2520 - border-radius: 50%;
2521 - width: 30px;
2522 - height: 30px;
2523 - animation: spin 1s linear infinite;
2524 - margin: 10px auto;
2525 -}
2526 -@keyframes spin {
2527 - 0% { transform: rotate(0deg); }
2528 - 100% { transform: rotate(360deg); }
2529 -}
2530 -
2531 -/* Processing Status Messages */
2532 -.mxchat-process-status,
2533 -.mxchat-pinecone-status {
2534 - border: 1px solid #0073aa;
2535 - background-color: #f1f8ff;
2536 - padding: 10px;
2537 - border-radius: 4px;
2538 - margin-top: 15px;
2539 -}
2540 -.mxchat-process-status h3,
2541 -.mxchat-pinecone-status h3 {
2542 - margin-top: 0;
2543 - font-size: 16px;
2544 - color: #0073aa;
2545 -}
2546 -.mxchat-process-status p,
2547 -.mxchat-pinecone-status p {
2548 - margin: 5px 0;
2549 - font-size: 14px;
2550 - color: #333;
2551 -}
2552 -
2553 -/* Responsive Adjustments */
2554 -@media (max-width: 768px) {
2555 - .mxchat-flex-container {
2556 - flex-direction: column;
2557 - }
2558 -}
2559 -
2560 -
2561 -
2562 -.button.button-primary.pinecone-submit {
2563 - box-shadow: none;
2564 - border-radius: 0px 4px 4px 0px;
2565 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2566 - margin-bottom: 0px;
2567 -}
2568 -
2569 -.button.button-primary.pinecone-submit:hover {
2570 - opacity: .8;
2571 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2572 -
2573 -}
2574 -
2575 -/* Pro Hero Section */
2576 -body.wp-admin .mxchat-pro-hero {
2577 - text-align: center;
2578 - padding: 3.5rem 2rem;
2579 - position: relative;
2580 - background: #212121;
2581 - border-bottom: 4px solid transparent;
2582 - border-image: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2583 - border-image-slice: 1;
2584 -}
2585 -
2586 -body.wp-admin .mxchat-pro-hero::before {
2587 - content: '';
2588 - position: absolute;
2589 - top: 0;
2590 - left: 0;
2591 - width: 100%;
2592 - height: 100%;
2593 - background: radial-gradient(
2594 - circle at center,
2595 - rgba(250, 115, 230, 0.08) 0%,
2596 - rgba(120, 115, 245, 0.08) 50%,
2597 - rgba(58, 201, 209, 0.08) 100%
2598 - );
2599 - z-index: 1;
2600 -}
2601 -
2602 -body.wp-admin .mxchat-pro-hero::after {
2603 - content: '';
2604 - position: absolute;
2605 - bottom: -20px;
2606 - left: 0;
2607 - width: 100%;
2608 - height: 20px;
2609 - background: linear-gradient(180deg, rgba(33, 33, 33, 0.2) 0%, transparent 100%);
2610 - z-index: 2;
2611 -}
2612 -
2613 -body.wp-admin .pro-title {
2614 - font-size: 3.5rem;
2615 - margin: 0 0 1.5rem;
2616 - line-height: 1.2;
2617 - color: white;
2618 - position: relative;
2619 - z-index: 2;
2620 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
2621 -}
2622 -
2623 -body.wp-admin .pro-gradient-text {
2624 - font-weight: 700;
2625 - background: linear-gradient(135deg, #fa73e6, #7873f5, #3ac9d1);
2626 - -webkit-background-clip: text;
2627 - -webkit-text-fill-color: transparent;
2628 - display: inline-block;
2629 -}
2630 -
2631 -body.wp-admin .pro-subtitle {
2632 - font-size: 1.25rem;
2633 - color: rgba(255, 255, 255, 0.9);
2634 - max-width: 600px;
2635 - margin: 0 auto;
2636 - position: relative;
2637 - z-index: 2;
2638 - line-height: 1.6;
2639 -}
2640 -
2641 -/* Responsive Design */
2642 -@media (max-width: 768px) {
2643 - body.wp-admin .pro-title {
2644 - font-size: 2.1rem;
2645 - margin-bottom: 1rem;
2646 - }
2647 890
2648 - body.wp-admin .mxchat-pro-hero {
2649 - padding: 2.5rem 1.5rem;
2650 - }
2651 891
2652 - body.wp-admin .pro-subtitle {
2653 - font-size: 1.1rem;
2654 - }
2655 892 }
2656 -
2657 -
2658 -/* Form Container Styles */
2659 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form-container {
2660 - max-width: 600px;
2661 - margin: 2rem auto;
2662 - background: white;
2663 - padding: 2rem;
2664 - border-radius: 12px;
2665 - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
2666 -}
2667 -
2668 -/* Form Table Styles */
2669 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table {
2670 - margin: 0;
2671 - border-collapse: separate;
2672 - border-spacing: 0 1rem;
2673 -}
2674 -
2675 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table th {
2676 - padding: 0 1rem 0 0;
2677 - width: 140px;
2678 - font-weight: 600;
2679 - color: #212121;
2680 - font-size: 15px;
2681 - vertical-align: middle;
2682 -}
2683 -
2684 -/* Input Field Styles */
2685 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-input {
2686 - width: 100%;
2687 - padding: 10px 16px;
2688 - border: 2px solid #e0e0e0;
2689 - border-radius: 8px;
2690 - font-size: 15px;
2691 - transition: all 0.3s ease;
2692 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
2693 -}
2694 -
2695 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-input:focus {
2696 - border-color: #7873f5;
2697 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
2698 - outline: none;
2699 -}
2700 -
2701 -/* Button Container and Button Styles */
2702 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button-container {
2703 - margin-top: 2rem;
2704 - text-align: right;
2705 - display: flex;
2706 - align-items: center;
2707 - justify-content: flex-end;
2708 - gap: 1rem;
2709 -}
2710 -
2711 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button {
2712 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2713 - border: none;
2714 - padding: 12px 24px;
2715 - border-radius: 8px;
2716 - color: white;
2717 - font-weight: 600;
2718 - font-size: 15px;
2719 - cursor: pointer;
2720 - transition: all 0.3s ease;
2721 - text-shadow: none;
2722 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.2);
2723 - height: auto;
2724 - line-height: 1.4;
2725 -}
2726 -
2727 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-button:hover {
2728 - transform: translateY(-2px);
2729 - box-shadow: 0 6px 16px rgba(120, 115, 245, 0.3);
2730 -}
2731 -
2732 -/* Error Notice Styles */
2733 -body.wp-admin .wrap.mxchat-admin-activation .error.notice {
2734 - margin: 2rem auto;
2735 - max-width: 600px;
2736 - border-left-color: #dc3232;
2737 - background: #fff;
2738 - border-radius: 4px;
2739 - box-shadow: 0 2px 8px rgba(220, 50, 50, 0.1);
2740 -}
2741 -
2742 -/* License Status Styles */
2743 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-status {
2744 - max-width: 600px;
2745 - margin: 2rem;
2746 - padding: 1.5rem;
2747 - background: white;
2748 - border-radius: 12px;
2749 - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
2750 -}
2751 -
2752 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-status h3 {
2753 - margin: 0;
2754 - font-size: 15px;
2755 - color: #212121;
2756 - display: flex;
2757 - align-items: center;
2758 - gap: 0.5rem;
2759 -}
2760 -
2761 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge {
2762 - padding: 6px 12px;
2763 - border-radius: 20px;
2764 - font-size: 13px;
2765 - font-weight: 600;
2766 -}
2767 -
2768 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge.active {
2769 - background: #e8f5e9;
2770 - color: #2e7d32;
2771 -}
2772 -
2773 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-status-badge.inactive {
2774 - background: #fff3e0;
2775 - color: #ef6c00;
2776 -}
2777 -
2778 -/* Spinner Styles */
2779 -body.wp-admin .wrap.mxchat-admin-activation .mxchat-activation-spinner {
2780 - width: 20px;
2781 - height: 20px;
2782 - border: 2px solid rgba(120, 115, 245, 0.3);
2783 - border-radius: 50%;
2784 - border-top-color: #7873f5;
2785 - animation: spin 1s linear infinite;
2786 -}
2787 -
2788 -@keyframes spin {
2789 - to {
2790 - transform: rotate(360deg);
2791 - }
2792 -}
2793 -
2794 -/* Responsive Adjustments */
2795 -@media (max-width: 782px) {
2796 - body.wp-admin .wrap.mxchat-admin-activation .mxchat-pro-form .form-table th {
2797 - padding-bottom: 0.5rem;
2798 - }
2799 -
2800 - body.wp-admin .wrap.mxchat-admin-activation .form-table,
2801 - body.wp-admin .wrap.mxchat-admin-activation .form-table tbody,
2802 - body.wp-admin .wrap.mxchat-admin-activation .form-table tr,
2803 - body.wp-admin .wrap.mxchat-admin-activation .form-table th,
2804 - body.wp-admin .wrap.mxchat-admin-activation .form-table td {
2805 - display: block;
2806 - width: 100%;
2807 - padding: 0;
2808 - }
2809 -
2810 - body.wp-admin .wrap.mxchat-admin-activation .form-table td {
2811 - margin-bottom: 1.5rem;
2812 - }
2813 -}
2814 -
2815 -
2816 -
2817 893