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