PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.1.6
MxChat – AI Chatbot & Content Generation for WordPress v2.1.6
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/knowledge-style.css +100 -3555 3.2.152.1.6 View file →
@@ -1,28 +1,15 @@
1 -/*
2 - * MxChat Knowledge Base Styles
3 - * Consolidated stylesheet for the Knowledge Base Manager
4 - */
1 +/* Core Layout */
5 2
6 -#wpcontent, .auto-fold #wpcontent {
7 - padding: 0px;
8 -}
9 -.mxchat-kb-header-note {
10 - font-size: 12px;
11 - font-weight: normal;
12 - color: #666;
13 - font-style: italic;
14 -}
15 -/* ===== Core Layout ===== */
16 3 .mxchat-wrapper, .mxchat-admin-activation {
17 - width: 100%;
18 - margin: 0px;
4 + width: calc(100% + 40px); /* Add 40px to account for left and right padding */
5 + margin: 0 -20px; /* Negative margin to counteract the padding */
19 6 padding: 0;
20 7 background-color: #f8f9ff;
21 8 min-height: 100vh;
22 9 }
23 10
24 -/* ===== Hero Section ===== */
11 +/* Hero Section */
25 12 .mxchat-hero {
26 13 text-align: center;
27 14 padding: 3.5rem 2rem;
28 15 position: relative;
@@ -74,9 +61,9 @@
74 61 z-index: 2;
75 62 line-height: 1.6;
76 63 }
77 64
78 -/* ===== Content Area ===== */
65 +/* Content Area */
79 66 .mxchat-content {
80 67 padding: 2rem;
81 68 max-width: 1400px;
82 69 margin: 0 auto;
@@ -83,9 +70,9 @@
83 70 width: 100%;
84 71 box-sizing: border-box;
85 72 }
86 73
87 -/* ===== Card Styles ===== */
74 +/* Card Styles */
88 75 .mxchat-card {
89 76 background: #fff;
90 77 border-radius: 16px;
91 78 box-shadow: 0 4px 20px rgba(120, 115, 245, 0.08);
@@ -104,331 +91,9 @@
104 91 color: #333;
105 92 font-size: 1.5rem;
106 93 }
107 94
108 -.mxchat-card-header {
109 - display: flex;
110 - justify-content: space-between;
111 - align-items: center;
112 - margin-bottom: 20px;
113 -}
114 -
115 -.mxchat-header-actions {
116 - display: flex;
117 - gap: 16px;
118 - align-items: center;
119 -}
120 -
121 -/* ===== Knowledge Warning ===== */
122 -.mxchat-knowledge-warning {
123 - padding: 15px;
124 - border-radius: 8px;
125 - margin-bottom: 20px;
126 -}
127 -
128 -.mxchat-knowledge-warning.success {
129 - background-color: #eefbe8;
130 - border-left: 4px solid #4caf50;
131 -}
132 -
133 -.mxchat-knowledge-warning.warning {
134 - background-color: #fff9e6;
135 - border-left: 4px solid #ff9800;
136 -}
137 -
138 -.mxchat-knowledge-warning p {
139 - align-items: center;
140 - margin: 0;
141 - color: #333;
142 -}
143 -
144 -.mxchat-knowledge-warning .dashicons {
145 - margin-right: 10px;
146 - font-size: 20px;
147 -}
148 -
149 -.mxchat-knowledge-warning .dashicons-yes-alt {
150 - color: #4caf50;
151 -}
152 -
153 -.mxchat-knowledge-warning .dashicons-warning {
154 - color: #ff9800;
155 -}
156 -
157 -/* ===== Import Section ===== */
158 -.mxchat-import-section {
159 - margin-top: 30px;
160 -}
161 -
162 -.mxchat-import-section h3 {
163 - margin-top: 0;
164 - margin-bottom: 20px;
165 - font-size: 18px;
166 - color: #333;
167 -}
168 -
169 -/* Import Options */
170 -.mxchat-import-options {
171 - display: grid;
172 - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
173 - gap: 16px;
174 - margin-bottom: 24px;
175 -}
176 -
177 -/* Import Box Styling */
178 -.mxchat-import-box {
179 - display: flex;
180 - align-items: flex-start;
181 - padding: 0;
182 - background: #fff;
183 - border: 1px solid #e5e5e5;
184 - border-radius: 10px;
185 - cursor: pointer;
186 - transition: all 0.2s ease;
187 - position: relative;
188 - overflow: hidden;
189 - text-align: left;
190 - width: 100%;
191 -}
192 -
193 -.mxchat-import-box:hover {
194 - border-color: #7873f5;
195 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.1);
196 - transform: translateY(-4px);
197 -}
198 -
199 -.mxchat-import-box.active {
200 - border-color: #7873f5;
201 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.1);
202 - transform: translateY(-4px);
203 -}
204 -
205 -.mxchat-import-wordpress {
206 - border: 2px solid #7873f5;
207 - background-color: #f8f9ff;
208 -}
209 -
210 -.mxchat-import-icon {
211 - width: 48px;
212 - height: 48px;
213 - display: flex;
214 - align-items: center;
215 - justify-content: center;
216 - background-color: #f0f0f0;
217 - border-radius: 8px;
218 - margin: 16px;
219 - flex-shrink: 0;
220 -}
221 -
222 -.mxchat-import-wordpress .mxchat-import-icon {
223 - background-color: #f0e6ff;
224 -}
225 -
226 -.mxchat-import-icon .dashicons {
227 - font-size: 24px;
228 - color: #7873f5;
229 -}
230 -
231 -.mxchat-import-content {
232 - flex: 1;
233 - padding: 18px 18px 18px 0;
234 -}
235 -
236 -.mxchat-import-content h4 {
237 - margin: 0 0 8px;
238 - font-size: 16px;
239 - color: #333;
240 -}
241 -
242 -.mxchat-import-content p {
243 - margin: 0;
244 - font-size: 14px;
245 - color: #666;
246 - line-height: 1.5;
247 -}
248 -
249 -.mxchat-recommended-tag {
250 - position: absolute;
251 - top: 0;
252 - right: 0;
253 - background-color: #7873f5;
254 - color: white;
255 - padding: 4px 10px;
256 - font-size: 10px;
257 - border-bottom-left-radius: 8px;
258 -}
259 -
260 -/* Import Input Areas */
261 -.mxchat-import-input-area {
262 - background-color: #f9f9fd;
263 - border-radius: 10px;
264 - padding: 24px;
265 - margin-bottom: 24px;
266 - border: 1px solid #e5e5e5;
267 - text-align: center;
268 -}
269 -
270 -/* YouTube import: multi-line radio/description stack reads left-aligned,
271 - unlike the single-row URL forms the centered default was made for. */
272 -#mxchat-youtube-input-area {
273 - text-align: left;
274 -}
275 -
276 -/* PDF Upload Area */
277 -#mxchat-pdf-upload-area input[type="file"] {
278 - margin-bottom: 12px;
279 -}
280 -
281 -.mxchat-url-input-group {
282 - display: flex;
283 - gap: 12px;
284 - max-width: 800px;
285 - margin: 0 auto;
286 -}
287 -
288 -.mxchat-url-input-group input {
289 - flex: 1;
290 - padding: 12px 16px;
291 - border: 1px solid #ddd;
292 - border-radius: 8px;
293 - font-size: 14px;
294 -}
295 -
296 -.mxchat-url-input-group input:focus {
297 - border-color: #7873f5;
298 - box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.1);
299 - outline: none;
300 -}
301 -
302 -.mxchat-url-description {
303 - font-size: 14px;
304 - color: #666;
305 - margin-top: 16px;
306 - font-style: italic;
307 -}
308 -
309 -.mxchat-content-input-group {
310 - max-width: 800px;
311 - margin: 0 auto;
312 -}
313 -
314 -.mxchat-content-input-group textarea {
315 - width: 100%;
316 - min-height: 150px;
317 - padding: 12px 16px;
318 - border: 1px solid #ddd;
319 - border-radius: 8px;
320 - margin-bottom: 16px;
321 - font-size: 14px;
322 - resize: vertical;
323 -}
324 -
325 -.mxchat-content-input-group textarea:focus {
326 - border-color: #7873f5;
327 - box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.1);
328 - outline: none;
329 -}
330 -
331 -/* Primary Import Card */
332 -.mxchat-primary-import-card {
333 - background-color: #fff;
334 - border: 2px solid #7873f5;
335 - border-radius: 8px;
336 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.1);
337 - margin-bottom: 30px;
338 - overflow: hidden;
339 - transition: all 0.3s ease;
340 -}
341 -
342 -.mxchat-primary-import-card:hover {
343 - box-shadow: 0 6px 16px rgba(120, 115, 245, 0.2);
344 - transform: translateY(-2px);
345 -}
346 -
347 -.mxchat-card-header {
348 - padding: 15px 20px;
349 - display: flex;
350 - align-items: center;
351 - justify-content: space-between;
352 - border-bottom: 1px solid #e2d9ff;
353 -}
354 -
355 -.mxchat-card-header h3 {
356 - margin: 0;
357 - color: #7873f5;
358 - font-size: 18px;
359 - font-weight: 600;
360 -}
361 -
362 -.mxchat-recommended-badge {
363 - background-color: #7873f5;
364 - color: white;
365 - font-size: 12px;
366 - padding: 4px 10px;
367 - border-radius: 12px;
368 - font-weight: 500;
369 -}
370 -
371 -.mxchat-card-content {
372 - padding: 20px;
373 -}
374 -
375 -.mxchat-method-description {
376 - font-size: 15px;
377 - line-height: 1.5;
378 - color: #555;
379 - margin-bottom: 20px;
380 -}
381 -
382 -.mxchat-card-actions {
383 - text-align: center;
384 -}
385 -
386 -.mxchat-featured-button {
387 - background: linear-gradient(135deg, #fa73e6, #7873f5) !important;
388 - color: white !important;
389 - font-size: 15px !important;
390 - padding: 10px 20px !important;
391 - border: none !important;
392 - box-shadow: 0 4px 8px rgba(120, 115, 245, 0.2) !important;
393 - transition: all 0.3s ease !important;
394 - display: inline-flex !important;
395 - align-items: center !important;
396 - gap: 8px !important;
397 -}
398 -
399 -.mxchat-featured-button:hover {
400 - background: linear-gradient(135deg, #e56dd6, #6b67db) !important;
401 - box-shadow: 0 6px 12px rgba(120, 115, 245, 0.3) !important;
402 - transform: translateY(-2px) !important;
403 -}
404 -
405 -/* Alternative Import Methods */
406 -.mxchat-alternative-imports {
407 - background-color: #fff;
408 - border: 1px solid #e5e5e5;
409 - border-radius: 8px;
410 - padding: 20px;
411 - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
412 -}
413 -
414 -.mxchat-alt-header {
415 - font-size: 16px;
416 - color: #666;
417 - margin-top: 0;
418 - margin-bottom: 15px;
419 - padding-bottom: 10px;
420 - border-bottom: 1px solid #eee;
421 -}
422 -
423 -.mxchat-import-methods-grid {
424 - display: grid;
425 - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
426 - gap: 20px;
427 - margin-bottom: 25px;
428 -}
429 -
430 -/* ===== Import Methods ===== */
95 +/* Import Methods */
431 96 .mxchat-import-methods {
432 97 display: grid;
433 98 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
434 99 gap: 20px;
@@ -435,85 +100,26 @@
435 100 margin: 30px 0;
436 101 }
437 102
438 103 .mxchat-method-card {
439 - background-color: #f9f9f9;
440 - border: 1px solid #eee;
441 - border-radius: 8px;
442 - padding: 15px;
443 - transition: all 0.2s ease;
444 - height: 100%;
104 + background: #f8f9ff;
105 + padding: 20px;
106 + border-radius: 10px;
107 + border: 1px solid rgba(120, 115, 245, 0.1);
445 108 }
446 109
447 -.mxchat-method-card:hover {
448 - background-color: #f5f5f5;
449 - border-color: #ddd;
110 +.mxchat-method-card h4 {
111 + color: #333;
112 + margin: 0 0 10px;
450 113 }
451 114
452 -.mxchat-method-icon {
453 - display: flex;
454 - justify-content: center;
455 - margin-bottom: 10px;
456 -}
457 -
458 -.mxchat-method-icon .dashicons {
459 - font-size: 24px;
460 - width: 24px;
461 - height: 24px;
115 +.mxchat-method-card p {
462 116 color: #666;
463 -}
464 -
465 -.mxchat-method-card h4,
466 -.mxchat-method-card h5 {
467 - margin: 0 0 10px 0;
468 - font-size: 15px;
469 - text-align: center;
470 - color: #444;
471 -}
472 -
473 -.mxchat-method-card p {
474 117 margin: 0;
475 - font-size: 13px;
476 - color: #666;
477 - text-align: center;
118 + font-size: 0.9rem;
478 119 }
479 120
480 -.mxchat-note,
481 -.red-warning {
482 - color: #ff5722;
483 - font-weight: 500;
484 -}
485 -
486 -/* Legacy Import Form */
487 -.mxchat-legacy-import-form {
488 - margin-top: 20px;
489 - padding-top: 20px;
490 - border-top: 1px dashed #ddd;
491 -}
492 -
493 -/* ===== Settings Section ===== */
494 -.mxchat-settings-section {
495 - margin-bottom: 30px;
496 -}
497 -
498 -.mxchat-settings-section h3 {
499 - margin-top: 0;
500 - margin-bottom: 12px;
501 - color: #333;
502 - font-size: 1.3rem;
503 -}
504 -
505 -.mxchat-description {
506 - color: #666;
507 - font-size: 14px;
508 - margin-bottom: 20px;
509 -}
510 -
511 -.mxchat-section-content {
512 - margin-top: 15px;
513 -}
514 -
515 -/* ===== Tabs ===== */
121 +/* Tabs */
516 122 .mxchat-tabs {
517 123 border-bottom: 1px solid rgba(120, 115, 245, 0.1);
518 124 margin-bottom: 20px;
519 125 display: flex;
@@ -539,21 +145,9 @@
539 145 color: #7873f5;
540 146 border-bottom-color: #7873f5;
541 147 }
542 148
543 -.mxchat-tab-contents {
544 - margin-top: 20px;
545 -}
546 -
547 -.mxchat-tab-content {
548 - display: none;
549 -}
550 -
551 -.mxchat-tab-content.active {
552 - display: block;
553 -}
554 -
555 -/* ===== Toggle Switches ===== */
149 +/* Toggle Switches */
556 150 .mxchat-toggle-group {
557 151 display: flex;
558 152 flex-direction: column;
559 153 gap: 15px;
@@ -610,32 +204,9 @@
610 204 input:checked + .mxchat-toggle-slider:before {
611 205 transform: translateX(26px);
612 206 }
613 207
614 -.mxchat-toggle-label {
615 - font-size: 14px;
616 - color: #333;
617 -}
618 -
619 -/* ===== Custom Post Types ===== */
620 -.mxchat-custom-post-types-header {
621 - margin-top: 20px;
622 -}
623 -
624 -.mxchat-custom-post-types-container {
625 - margin-top: 15px;
626 - padding: 15px;
627 - background-color: #f8f9ff;
628 - border-radius: 8px;
629 - border: 1px solid rgba(120, 115, 245, 0.1);
630 -}
631 -
632 -.mxchat-toggle-icon {
633 - margin-left: 5px;
634 - font-size: 12px;
635 -}
636 -
637 -/* ===== Form Elements ===== */
208 +/* Form Elements */
638 209 .mxchat-form-group {
639 210 margin-bottom: 20px;
640 211 }
641 212
@@ -647,9 +218,8 @@
647 218 }
648 219
649 220 .mxchat-form-group input[type="text"],
650 221 .mxchat-form-group input[type="url"],
651 -.mxchat-form-group input[type="search"],
652 222 .mxchat-form-group textarea {
653 223 width: 100%;
654 224 padding: 12px 15px;
655 225 border: 2px solid rgba(120, 115, 245, 0.2);
@@ -669,65 +239,19 @@
669 239 box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
670 240 outline: none;
671 241 }
672 242
673 -/* ===== Search ===== */
674 -.mxchat-search-form {
243 +/* URL Input Group */
244 +.mxchat-url-input-group {
675 245 display: flex;
246 + gap: 10px;
676 247 }
677 248
678 -.mxchat-search-group {
679 - position: relative;
680 - display: flex;
681 - align-items: center;
249 +.mxchat-url-input-group input {
250 + flex: 1;
682 251 }
683 252
684 -.mxchat-search-group .dashicons {
685 - position: absolute;
686 - left: 12px;
687 - color: #666;
688 -}
689 -
690 -.mxchat-search-group input {
691 - padding-left: 40px;
692 - width: 300px;
693 -}
694 -
695 -/* ADDED 2.5.6: Content Type Filter Styles */
696 -.mxchat-filter-group {
697 - position: relative;
698 - display: flex;
699 - align-items: center;
700 - margin-left: 12px;
701 -}
702 -
703 -.mxchat-filter-group select {
704 - padding: 8px 32px 8px 12px;
705 - border: 1px solid #ddd;
706 - border-radius: 8px;
707 - background: white;
708 - color: #333;
709 - font-size: 14px;
710 - cursor: pointer;
711 - transition: all 0.2s ease;
712 - appearance: none;
713 - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
714 - background-repeat: no-repeat;
715 - background-position: right 12px center;
716 -}
717 -
718 -.mxchat-filter-group select:hover {
719 - border-color: #7873f5;
720 - box-shadow: 0 2px 8px rgba(120, 115, 245, 0.1);
721 -}
722 -
723 -.mxchat-filter-group select:focus {
724 - outline: none;
725 - border-color: #7873f5;
726 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
727 -}
728 -
729 -/* ===== Buttons ===== */
253 +/* Buttons */
730 254 .mxchat-button-primary {
731 255 background: linear-gradient(135deg, #fa73e6, #7873f5);
732 256 border: none;
733 257 color: white;
@@ -742,15 +266,8 @@
742 266 transform: translateY(-1px);
743 267 box-shadow: 0 4px 12px rgba(120, 115, 245, 0.2);
744 268 }
745 269
746 -.mxchat-button-primary:disabled {
747 - background: #a7a7a7;
748 - cursor: not-allowed;
749 - transform: none;
750 - box-shadow: none;
751 -}
752 -
753 270 .mxchat-button-secondary {
754 271 background: #f8f9ff;
755 272 border: 1px solid rgba(120, 115, 245, 0.2);
756 273 color: #666;
@@ -795,89 +312,9 @@
795 312 background: #f8f9ff;
796 313 color: #7873f5;
797 314 }
798 315
799 -/* ===== Status Cards ===== */
800 -.mxchat-status-card {
801 - background: #f8f9ff;
802 - border-radius: 10px;
803 - padding: 20px;
804 - margin-top: 20px;
805 - border: 1px solid rgba(120, 115, 245, 0.1);
806 -}
807 -
808 -.mxchat-status-header {
809 - display: flex;
810 - justify-content: space-between;
811 - align-items: center;
812 - margin-bottom: 15px;
813 -}
814 -
815 -.mxchat-status-details {
816 - margin-top: 10px;
817 - color: #666;
818 -}
819 -
820 -.mxchat-status-badge {
821 - display: inline-block;
822 - padding: 3px 8px;
823 - border-radius: 3px;
824 - font-size: 12px;
825 - font-weight: 500;
826 - text-transform: uppercase;
827 - margin-left: 10px;
828 -}
829 -
830 -.mxchat-status-failed {
831 - background-color: #f44336;
832 - color: white;
833 -}
834 -
835 -.mxchat-status-success {
836 - background-color: #4caf50;
837 - color: white;
838 -}
839 -
840 -.mxchat-error-notice {
841 - margin-top: 15px;
842 - padding: 10px;
843 - background-color: #fff5f5;
844 - border-left: 3px solid #f44336;
845 - color: #d32f2f;
846 - border-radius: 4px;
847 -}
848 -
849 -.mxchat-failed-urls {
850 - margin-top: 15px;
851 -}
852 -
853 -.mxchat-failed-urls h5 {
854 - margin-top: 0;
855 - margin-bottom: 10px;
856 - color: #333;
857 -}
858 -
859 -.mxchat-failed-urls-list {
860 - max-height: 200px;
861 - overflow-y: auto;
862 -}
863 -
864 -/* ===== Progress Bar ===== */
865 -.mxchat-progress-bar {
866 - height: 8px;
867 - background: rgba(120, 115, 245, 0.1);
868 - border-radius: 4px;
869 - overflow: hidden;
870 - margin: 15px 0;
871 -}
872 -
873 -.mxchat-progress-fill {
874 - height: 100%;
875 - background: linear-gradient(135deg, #fa73e6, #7873f5);
876 - transition: width 0.3s ease;
877 -}
878 -
879 -/* ===== Table Styles ===== */
316 +/* Table Styles */
880 317 .mxchat-table-wrapper {
881 318 overflow-x: auto;
882 319 margin: 20px 0;
883 320 }
@@ -896,14 +333,8 @@
896 333 text-align: left;
897 334 border-bottom: 2px solid rgba(120, 115, 245, 0.1);
898 335 }
899 336
900 -/* Hide ID column (now second column, after checkbox column) */
901 -.mxchat-records-table th:nth-child(2),
902 -.mxchat-records-table td:nth-child(2) {
903 - display: none;
904 -}
905 -
906 337 .mxchat-records-table td {
907 338 padding: 15px;
908 339 border-top: 1px solid rgba(120, 115, 245, 0.1);
909 340 vertical-align: top;
@@ -913,110 +344,11 @@
913 344 background: rgba(120, 115, 245, 0.03);
914 345 }
915 346
916 347 .mxchat-content-cell {
917 - max-width: 600px;
348 + max-width: 400px;
918 349 }
919 350
920 -/* ===== Accordion Styles ===== */
921 -.mxchat-accordion-wrapper {
922 - width: 100%;
923 -}
924 -
925 -.mxchat-content-preview {
926 - display: flex;
927 - align-items: center;
928 - gap: 12px;
929 - padding: 8px 12px;
930 - border-radius: 6px;
931 - transition: all 0.2s ease;
932 -}
933 -
934 -/* Only make it look clickable if there's an expand button */
935 -.mxchat-content-preview:has(.mxchat-expand-toggle) {
936 - cursor: pointer;
937 -}
938 -
939 -.mxchat-content-preview:has(.mxchat-expand-toggle):hover {
940 - background: rgba(120, 115, 245, 0.04);
941 -}
942 -
943 -.mxchat-content-preview .preview-text {
944 - flex: 1;
945 - font-size: 14px;
946 - line-height: 1.6;
947 - color: #333;
948 - overflow: hidden;
949 -}
950 -
951 -.mxchat-expand-toggle {
952 - flex-shrink: 0;
953 - width: 28px;
954 - height: 28px;
955 - border: none;
956 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.1), rgba(120, 115, 245, 0.1));
957 - border-radius: 6px;
958 - cursor: pointer;
959 - display: inline-flex;
960 - align-items: center;
961 - justify-content: center;
962 - transition: all 0.3s ease;
963 - padding: 0;
964 -}
965 -
966 -.mxchat-expand-toggle:hover {
967 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.2), rgba(120, 115, 245, 0.2));
968 - transform: scale(1.05);
969 -}
970 -
971 -.mxchat-expand-toggle .dashicons {
972 - font-size: 18px;
973 - width: 18px;
974 - height: 18px;
975 - color: #7873f5;
976 - transition: transform 0.3s ease;
977 -}
978 -
979 -.mxchat-expand-toggle.expanded .dashicons {
980 - transform: rotate(180deg);
981 -}
982 -
983 -.mxchat-content-full {
984 - margin-top: 12px;
985 - padding: 16px;
986 - background: rgba(120, 115, 245, 0.03);
987 - border-radius: 8px;
988 - border-left: 3px solid #7873f5;
989 - animation: slideDown 0.3s ease;
990 -}
991 -
992 -@keyframes slideDown {
993 - from {
994 - opacity: 0;
995 - max-height: 0;
996 - transform: translateY(-10px);
997 - }
998 - to {
999 - opacity: 1;
1000 - max-height: 1000px;
1001 - transform: translateY(0);
1002 - }
1003 -}
1004 -
1005 -.mxchat-content-full .content-view {
1006 - font-size: 14px;
1007 - line-height: 1.6;
1008 - color: #333;
1009 -}
1010 -
1011 -.mxchat-content-full .content-view p {
1012 - margin: 0 0 12px 0;
1013 -}
1014 -
1015 -.mxchat-content-full .content-view p:last-child {
1016 - margin-bottom: 0;
1017 -}
1018 -
1019 351 .mxchat-url-cell a {
1020 352 color: #7873f5;
1021 353 text-decoration: none;
1022 354 display: flex;
@@ -1033,777 +365,111 @@
1033 365 display: flex;
1034 366 gap: 8px;
1035 367 }
1036 368
1037 -/* Legacy content-view styling (now within accordion) */
1038 -.content-edit {
1039 - width: 100%;
1040 - min-height: 100px;
1041 - border: 1px solid #ddd;
369 +/* Progress Bar */
370 +.mxchat-progress-bar {
371 + height: 8px;
372 + background: rgba(120, 115, 245, 0.1);
1042 373 border-radius: 4px;
1043 - padding: 10px;
374 + overflow: hidden;
375 + margin: 10px 0;
1044 376 }
1045 377
1046 -.url-view a {
1047 - color: #7873f5;
1048 - text-decoration: none;
378 +.mxchat-progress-fill {
379 + height: 100%;
380 + background: linear-gradient(135deg, #fa73e6, #7873f5);
381 + transition: width 0.3s ease;
1049 382 }
1050 383
1051 -.url-edit {
1052 - width: 100%;
1053 -}
1054 -
1055 -/* ===== Pagination ===== */
1056 -.mxchat-pagination {
384 +/* Status Card */
385 +.mxchat-status-card {
386 + background: #f8f9ff;
387 + border-radius: 10px;
388 + padding: 20px;
1057 389 margin-top: 20px;
1058 - padding-top: 20px;
1059 - text-align: center;
1060 - border-top: 1px solid rgba(120, 115, 245, 0.1);
1061 390 }
1062 391
1063 -.mxchat-pagination .page-numbers {
1064 - display: inline-flex;
1065 - align-items: center;
1066 - justify-content: center;
1067 - min-width: 32px;
1068 - height: 32px;
1069 - padding: 0 8px;
1070 - margin: 0 4px;
1071 - border-radius: 6px;
1072 - background: white;
1073 - border: 1px solid rgba(120, 115, 245, 0.2);
1074 - color: #333;
1075 - text-decoration: none;
1076 - transition: all 0.2s ease;
1077 -}
1078 -
1079 -.mxchat-pagination .page-numbers.current {
1080 - background: linear-gradient(135deg, #fa73e6, #7873f5);
1081 - color: white;
1082 - border: none;
1083 -}
1084 -
1085 -/* ===== Notifications ===== */
1086 -.mxchat-notification {
1087 - margin: 15px 20px 0;
1088 - padding: 10px 15px;
1089 - border-radius: 4px;
1090 - font-size: 14px;
1091 -}
1092 -
1093 -.mxchat-notification.success {
1094 - background-color: #d4edda;
1095 - color: #155724;
1096 - border: 1px solid #c3e6cb;
1097 -}
1098 -
1099 -.mxchat-notification.error {
1100 - background-color: #f8d7da;
1101 - color: #721c24;
1102 - border: 1px solid #f5c6cb;
1103 -}
1104 -
1105 -/* ===== Responsive Design ===== */
1106 -@media (max-width: 768px) {
1107 - .mxchat-hero h1.mxchat-main-title {
1108 - font-size: 2.5rem;
1109 - }
1110 -
1111 - .mxchat-card {
1112 - padding: 20px;
1113 - }
1114 -
1115 - .mxchat-import-options {
1116 - grid-template-columns: 1fr;
1117 - }
1118 -
1119 - .mxchat-url-input-group {
1120 - flex-direction: column;
1121 - }
1122 -
1123 - .mxchat-url-input-group input,
1124 - .mxchat-url-input-group button {
1125 - width: 100%;
1126 - }
1127 -
1128 - .mxchat-content-input-group textarea {
1129 - min-height: 120px;
1130 - }
1131 -
1132 - .mxchat-status-header {
1133 - flex-direction: column;
1134 - align-items: flex-start;
1135 - gap: 10px;
1136 - }
1137 -
1138 - .mxchat-records-table {
1139 - display: block;
1140 - overflow-x: auto;
1141 - }
1142 -
1143 - .mxchat-stop-form button {
1144 - width: 100%;
1145 - }
1146 -}
1147 -
1148 -@media (max-width: 480px) {
1149 - .mxchat-card {
1150 - padding: 15px;
1151 - }
1152 -
1153 - .mxchat-import-box {
1154 - flex-direction: column;
1155 - align-items: center;
1156 - text-align: center;
1157 - }
1158 -
1159 - .mxchat-import-icon {
1160 - margin: 16px 16px 0 16px;
1161 - }
1162 -
1163 - .mxchat-import-content {
1164 - padding: 16px;
1165 - }
1166 -
1167 - .mxchat-recommended-tag {
1168 - border-radius: 0 0 0 8px;
1169 - }
1170 -}
1171 -
1172 -/* RTL Support */
1173 -.rtl .mxchat-knowledge-warning {
1174 - border-left: none;
1175 - border-right: 4px solid;
1176 -}
1177 -
1178 -.rtl .mxchat-knowledge-warning .dashicons {
1179 - margin-right: 0;
1180 - margin-left: 10px;
1181 -}
1182 -
1183 -.rtl .mxchat-import-box {
1184 - flex-direction: row-reverse;
1185 -}
1186 -
1187 -.rtl .mxchat-import-content {
1188 - padding: 16px 0 16px 16px;
1189 -}
1190 -
1191 -.rtl .mxchat-import-icon {
1192 - margin: 16px;
1193 -}
1194 -
1195 -.rtl .mxchat-recommended-tag {
1196 - right: auto;
1197 - left: 0;
1198 - border-bottom-left-radius: 0;
1199 - border-bottom-right-radius: 8px;
1200 -}
1201 -
1202 -.rtl .mxchat-toggle-container {
1203 - flex-direction: row-reverse;
1204 -}
1205 -
1206 -.rtl .mxchat-toggle-slider:before {
1207 - left: auto;
1208 - right: 2px;
1209 -}
1210 -
1211 -.rtl input:checked + .mxchat-toggle-slider:before {
1212 - transform: translateX(-26px);
1213 -}
1214 -
1215 -.rtl .mxchat-error-notice {
1216 - border-left: none;
1217 - border-right: 3px solid #f44336;
1218 -}
1219 -
1220 -.rtl .mxchat-records-table th,
1221 -.rtl .mxchat-records-table td {
1222 - text-align: right;
1223 -}
1224 -
1225 -.rtl .mxchat-search-group .dashicons {
1226 - left: auto;
1227 - right: 12px;
1228 -}
1229 -
1230 -.rtl .mxchat-search-group input {
1231 - padding-left: 12px;
1232 - padding-right: 40px;
1233 -}
1234 -
1235 -
1236 -
1237 -
1238 -
1239 -
1240 -
1241 -
1242 -
1243 -
1244 -
1245 -
1246 -
1247 -
1248 -
1249 -
1250 -
1251 -
1252 -
1253 -
1254 -
1255 -
1256 -
1257 -
1258 -
1259 -
1260 -
1261 -
1262 -/* ===== Modal Styles ===== */
1263 -.mxchat-kb-modal {
1264 - display: none;
1265 - position: fixed;
1266 - top: 0;
1267 - left: 0;
1268 - width: 100%;
1269 - height: 100%;
1270 - background-color: rgba(0, 0, 0, 0.7);
1271 - z-index: 999999;
1272 - overflow: auto;
1273 - justify-content: center;
1274 - align-items: center;
1275 -}
1276 -
1277 -.mxchat-kb-modal.active {
392 +.mxchat-status-header {
1278 393 display: flex;
1279 -}
1280 -
1281 -.mxchat-kb-modal-content {
1282 - position: relative;
1283 - background-color: #fff;
1284 - margin: 50px auto;
1285 - padding: 0;
1286 - border-radius: 8px;
1287 - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1288 - width: 90%;
1289 - max-width: 1000px;
1290 - max-height: 85vh;
1291 - display: flex;
1292 - flex-direction: column;
1293 - animation: mxchat-kb-modal-appear 0.3s ease-out;
1294 -}
1295 -
1296 -@keyframes mxchat-kb-modal-appear {
1297 - from {
1298 - opacity: 0;
1299 - transform: translateY(-30px);
1300 - }
1301 - to {
1302 - opacity: 1;
1303 - transform: translateY(0);
1304 - }
1305 -}
1306 -
1307 -.mxchat-kb-modal-header {
1308 - display: flex;
394 + justify-content: space-between;
1309 395 align-items: center;
1310 - justify-content: space-between;
1311 - padding: 20px;
1312 - border-bottom: 1px solid #e5e5e5;
1313 - background-color: #f8f9fa;
1314 - border-radius: 8px 8px 0 0;
396 + margin-bottom: 15px;
1315 397 }
1316 398
1317 -.mxchat-kb-modal-header h3 {
1318 - margin: 0;
1319 - font-size: 20px;
1320 - font-weight: 600;
1321 - color: #23282d;
1322 -}
1323 -
1324 -.mxchat-kb-modal-close {
1325 - font-size: 28px;
1326 - font-weight: bold;
1327 - cursor: pointer;
399 +.mxchat-status-details {
400 + margin-top: 10px;
1328 401 color: #666;
1329 - line-height: 1;
1330 - transition: color 0.2s;
1331 402 }
1332 403
1333 -.mxchat-kb-modal-close:hover {
1334 - color: #d63638;
404 +/* Search */
405 +.mxchat-search-form {
406 + position: relative;
1335 407 }
1336 408
1337 -.mxchat-kb-modal-filters {
1338 - padding: 15px 20px;
1339 - background-color: #f8f9fa;
409 +.mxchat-search-group {
410 + position: relative;
1340 411 display: flex;
1341 412 align-items: center;
1342 - justify-content: space-between;
1343 - border-bottom: 1px solid #e5e5e5;
1344 - flex-wrap: wrap;
1345 - gap: 10px;
1346 413 }
1347 414
1348 -.mxchat-kb-search-group {
1349 - position: relative;
1350 - flex: 1;
1351 - min-width: 200px;
1352 - max-width: 400px;
1353 -}
1354 -
1355 -.mxchat-kb-search-group input {
1356 - width: 100%;
1357 - padding: 8px 12px 8px 35px;
1358 - border-radius: 4px;
1359 - border: 1px solid #ddd;
1360 - font-size: 14px;
1361 - transition: border-color 0.2s;
1362 -}
1363 -
1364 -.mxchat-kb-search-group input:focus {
1365 - border-color: #7873f5;
1366 - outline: none;
1367 - box-shadow: 0 0 0 1px #7873f5;
1368 -}
1369 -
1370 -.mxchat-kb-search-group::before {
1371 - content: "\f179";
1372 - font-family: dashicons;
415 +.mxchat-search-group .dashicons {
1373 416 position: absolute;
1374 - left: 10px;
1375 - top: 50%;
1376 - transform: translateY(-50%);
417 + left: 12px;
1377 418 color: #666;
1378 419 }
1379 420
1380 -.mxchat-kb-filter-group {
1381 - display: flex;
1382 - gap: 10px;
1383 - flex-wrap: wrap;
421 +.mxchat-search-group input {
422 + padding-left: 40px;
423 + width: 300px;
1384 424 }
1385 425
1386 -.mxchat-kb-filter-group select {
1387 - padding: 8px 12px;
1388 - border-radius: 4px;
1389 - border: 1px solid #ddd;
1390 - font-size: 14px;
1391 - background-color: white;
1392 - min-width: 150px;
1393 - appearance: none;
1394 - background-repeat: no-repeat;
1395 - background-position: right 10px center;
1396 - padding-right: 30px;
1397 -}
1398 -
1399 -.mxchat-kb-filter-group select:focus {
1400 - border-color: #7873f5;
1401 - outline: none;
1402 - box-shadow: 0 0 0 1px #7873f5;
1403 -}
1404 -
1405 -/* Special style for the "processed" filter */
1406 -#mxchat-kb-processed-filter {
1407 - border-left: 3px solid #1e88e5;
1408 -}
1409 -
1410 -.mxchat-kb-content-selection {
1411 - overflow-y: auto;
1412 - flex: 1;
1413 - min-height: 300px;
1414 - max-height: calc(85vh - 200px);
1415 -}
1416 -
1417 -.mxchat-kb-selection-header {
426 +/* Header Actions */
427 +.mxchat-card-header {
1418 428 display: flex;
1419 429 justify-content: space-between;
1420 430 align-items: center;
1421 - padding: 15px 20px;
1422 - background-color: #f8f9fa;
1423 - border-bottom: 1px solid #eee;
1424 - position: sticky;
1425 - top: 0;
1426 - z-index: 10;
431 + margin-bottom: 20px;
1427 432 }
1428 433
1429 -.mxchat-kb-selection-header label {
434 +.mxchat-header-actions {
1430 435 display: flex;
436 + gap: 16px;
1431 437 align-items: center;
1432 - gap: 8px;
1433 - font-weight: 500;
1434 438 }
1435 439
1436 -.mxchat-kb-selection-count {
1437 - font-size: 14px;
1438 - color: #666;
1439 - font-weight: 500;
440 +/* Pagination */
441 +.mxchat-pagination {
442 + margin-top: 20px;
443 + padding-top: 20px;
444 + text-align: center;
445 + border-top: 1px solid rgba(120, 115, 245, 0.1);
1440 446 }
1441 447
1442 -.mxchat-kb-content-list {
1443 - padding: 0;
1444 -}
1445 -
1446 -.mxchat-kb-content-item {
1447 - display: flex;
1448 - padding: 15px 20px;
1449 - border-bottom: 1px solid #eee;
1450 - transition: background-color 0.2s;
1451 -}
1452 -
1453 -.mxchat-kb-content-item:hover {
1454 - background-color: #f0f7ff;
1455 -}
1456 -
1457 -/* Improved visibility for processed items */
1458 -.mxchat-kb-content-item.processed {
1459 - background-color: #f0f8ff;
1460 - border-left: 3px solid #1e88e5;
1461 -}
1462 -
1463 -.mxchat-kb-content-item.processed:hover {
1464 - background-color: #e3f2fd;
1465 -}
1466 -
1467 -.mxchat-kb-content-checkbox {
1468 - margin-right: 15px;
1469 - display: flex;
1470 - align-items: flex-start;
1471 - padding-top: 3px;
1472 -}
1473 -
1474 -.mxchat-kb-content-checkbox input[type="checkbox"] {
1475 - width: 18px;
1476 - height: 18px;
1477 - border: 1px solid #8c8f94;
1478 - border-radius: 3px;
1479 - background: #fff;
1480 - margin: 0;
1481 -}
1482 -
1483 -.mxchat-kb-content-checkbox input[type="checkbox"]:checked {
1484 - border-color: #7873f5;
1485 -}
1486 -
1487 -.mxchat-kb-content-details {
1488 - flex: 1;
1489 -}
1490 -
1491 -.mxchat-kb-content-title {
1492 - font-size: 16px;
1493 - font-weight: 600;
1494 - margin-bottom: 8px;
1495 - display: flex;
448 +.mxchat-pagination .page-numbers {
449 + display: inline-flex;
1496 450 align-items: center;
1497 - flex-wrap: wrap;
1498 - gap: 8px;
1499 -}
1500 -
1501 -.mxchat-kb-content-title a {
1502 - color: #7873f5;
451 + justify-content: center;
452 + min-width: 32px;
453 + height: 32px;
454 + padding: 0 8px;
455 + margin: 0 4px;
456 + border-radius: 6px;
457 + background: white;
458 + border: 1px solid rgba(120, 115, 245, 0.2);
459 + color: #333;
1503 460 text-decoration: none;
461 + transition: all 0.2s ease;
1504 462 }
1505 463
1506 -.mxchat-kb-content-title a:hover {
1507 - color: #fa73e6;
1508 - text-decoration: underline;
1509 -}
1510 -
1511 -/* Style for processed badge */
1512 -.mxchat-kb-processed-badge {
1513 - display: inline-block;
1514 - background-color: #1e88e5;
1515 - color: white;
1516 - font-size: 11px;
1517 - padding: 2px 8px;
1518 - border-radius: 10px;
1519 - font-weight: normal;
1520 -}
1521 -
1522 -/* Style for unprocessed badge */
1523 -.mxchat-kb-unprocessed-badge {
1524 - display: inline-block;
1525 - background-color: #607d8b;
1526 - color: white;
1527 - font-size: 11px;
1528 - padding: 2px 8px;
1529 - border-radius: 10px;
1530 - font-weight: normal;
1531 -}
1532 -
1533 -/* Last updated timestamp */
1534 -.mxchat-kb-last-updated {
1535 - font-size: 11px;
1536 - color: #666;
1537 - font-style: italic;
1538 - margin-left: 8px;
1539 -}
1540 -
1541 -.mxchat-kb-content-meta {
1542 - display: flex;
1543 - flex-wrap: wrap;
1544 - gap: 15px;
1545 - color: #666;
1546 - font-size: 13px;
1547 - margin-bottom: 8px;
1548 -}
1549 -
1550 -.mxchat-kb-content-excerpt {
1551 - color: #555;
1552 - font-size: 14px;
1553 - line-height: 1.5;
1554 -}
1555 -
1556 -.mxchat-kb-modal-footer {
1557 - padding: 15px 20px;
1558 - border-top: 1px solid #e5e5e5;
1559 - display: flex;
1560 - justify-content: space-between;
1561 - align-items: center;
1562 - gap: 15px;
1563 - background-color: #f8f9fa;
1564 - border-radius: 0 0 8px 8px;
1565 -}
1566 -
1567 -.mxchat-kb-modal-footer .mxchat-kb-pagination {
1568 - flex: 1;
1569 - margin: 0;
1570 - padding: 0;
1571 - text-align: left;
1572 -}
1573 -
1574 -.mxchat-kb-footer-actions {
1575 - display: flex;
1576 - gap: 10px;
1577 - flex-shrink: 0;
1578 -}
1579 -
1580 -.mxchat-kb-button-primary,
1581 -.mxchat-kb-button-secondary {
1582 - padding: 8px 15px;
1583 - border-radius: 4px;
1584 - font-size: 14px;
1585 - cursor: pointer;
1586 - font-weight: 500;
1587 - text-align: center;
1588 - transition: all 0.2s;
1589 -}
1590 -
1591 -.mxchat-kb-button-primary {
464 +.mxchat-pagination .page-numbers.current {
1592 465 background: linear-gradient(135deg, #fa73e6, #7873f5);
1593 466 color: white;
1594 467 border: none;
1595 468 }
1596 469
1597 -.mxchat-kb-button-primary:hover {
1598 - background: linear-gradient(135deg, #e56dd6, #6b67db);
1599 -}
1600 -
1601 -.mxchat-kb-button-primary:disabled {
1602 - background-color: #a7a7a7;
1603 - cursor: not-allowed;
1604 -}
1605 -
1606 -/* Update mode for the process button */
1607 -#mxchat-kb-process-selected.update-mode {
1608 - background-color: #ff9800;
1609 -}
1610 -
1611 -#mxchat-kb-process-selected.update-mode:hover {
1612 - background-color: #f57c00;
1613 -}
1614 -
1615 -/* Mixed mode for the process button */
1616 -#mxchat-kb-process-selected.mixed-mode {
1617 - background-color: #9c27b0;
1618 -}
1619 -
1620 -#mxchat-kb-process-selected.mixed-mode:hover {
1621 - background-color: #7b1fa2;
1622 -}
1623 -
1624 -.mxchat-kb-button-secondary {
1625 - background-color: #f6f7f7;
1626 - color: #2c3338;
1627 - border: 1px solid #ddd;
1628 -}
1629 -
1630 -.mxchat-kb-button-secondary:hover {
1631 - background-color: #f0f0f0;
1632 - border-color: #c3c4c7;
1633 -}
1634 -
1635 -.mxchat-kb-pagination {
1636 - padding: 15px 20px;
1637 - border-top: 1px solid #eee;
1638 - text-align: center;
1639 -}
1640 -
1641 -.mxchat-kb-pagination-links {
1642 - display: flex;
1643 - justify-content: center;
1644 - align-items: center;
1645 - gap: 5px;
1646 - flex-wrap: wrap;
1647 -}
1648 -
1649 -.mxchat-kb-page-link {
1650 - padding: 5px 10px;
1651 - text-decoration: none;
1652 - border: 1px solid #ddd;
1653 - color: #7873f5;
1654 - border-radius: 3px;
1655 - transition: all 0.2s;
1656 -}
1657 -
1658 -.mxchat-kb-page-link:hover {
1659 - background-color: #f0f0f0;
1660 - color: #fa73e6;
1661 - border-color: #c3c4c7;
1662 -}
1663 -
1664 -.mxchat-kb-page-current {
1665 - padding: 5px 10px;
1666 - background: linear-gradient(135deg, #fa73e6, #7873f5);
1667 - color: white;
1668 - border-radius: 3px;
1669 - font-weight: 500;
1670 -}
1671 -
1672 -/* ===== Loading and Error States ===== */
1673 -.mxchat-kb-no-results,
1674 -.mxchat-kb-error {
1675 - padding: 30px;
1676 - text-align: center;
1677 - color: #666;
1678 - font-size: 14px;
1679 -}
1680 -
1681 -.mxchat-kb-error {
1682 - color: #d63638;
1683 -}
1684 -
1685 -.mxchat-kb-loading {
1686 - display: flex;
1687 - flex-direction: column;
1688 - align-items: center;
1689 - justify-content: center;
1690 - padding: 50px;
1691 - color: #666;
1692 -}
1693 -
1694 -.mxchat-kb-spinner {
1695 - display: inline-block;
1696 - width: 50px;
1697 - height: 50px;
1698 - border: 5px solid #f3f3f3;
1699 - border-top: 5px solid #7873f5;
1700 - border-radius: 50%;
1701 - animation: mxchat-kb-spin 1s linear infinite;
1702 - margin: 0 0 10px 0;
1703 -}
1704 -
1705 -@keyframes mxchat-kb-spin {
1706 - 0% { transform: rotate(0deg); }
1707 - 100% { transform: rotate(360deg); }
1708 -}
1709 -
1710 -.mxchat-kb-progress-bar {
1711 - height: 8px;
1712 - background-color: #f0f0f0;
1713 - border-radius: 4px;
1714 - margin: 10px 0 15px;
1715 - overflow: hidden;
1716 -}
1717 -
1718 -.mxchat-kb-progress-fill {
1719 - height: 100%;
1720 - background: linear-gradient(135deg, #fa73e6, #7873f5);
1721 - transition: width 0.3s ease;
1722 -}
1723 -
1724 -.mxchat-kb-current-item {
1725 - font-size: 14px;
1726 - color: #555;
1727 - margin: 10px 0 0;
1728 - font-style: italic;
1729 -}
1730 -
1731 -.mxchat-kb-results-details {
1732 - margin-top: 15px;
1733 - text-align: left;
1734 - max-height: 200px;
1735 - overflow-y: auto;
1736 - padding: 10px;
1737 - border-radius: 4px;
1738 -}
1739 -
1740 -.mxchat-kb-results-details h5 {
1741 - margin-top: 0;
1742 - margin-bottom: 10px;
1743 - color: #d63638;
1744 -}
1745 -
1746 -.mxchat-kb-results-details ul {
1747 - margin: 0;
1748 - padding-left: 20px;
1749 -}
1750 -
1751 -.mxchat-kb-results-details li {
1752 - margin-bottom: 5px;
1753 -}
1754 -
1755 -/* ===== Processing Overlay ===== */
1756 -.mxchat-kb-processing-overlay {
1757 - position: fixed;
1758 - top: 0;
1759 - left: 0;
1760 - width: 100%;
1761 - height: 100%;
1762 - background-color: rgba(0, 0, 0, 0.7);
1763 - z-index: 9999999;
1764 - display: flex;
1765 - justify-content: center;
1766 - align-items: center;
1767 -}
1768 -
1769 -.mxchat-kb-processing-content {
1770 - background-color: white;
1771 - padding: 30px;
1772 - border-radius: 8px;
1773 - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1774 - text-align: center;
1775 - max-width: 500px;
1776 - width: 90%;
1777 -}
1778 -
1779 -.mxchat-kb-processing-content h3 {
1780 - margin-top: 0;
1781 - margin-bottom: 15px;
1782 - font-size: 20px;
1783 - color: #7873f5;
1784 -}
1785 -
1786 -.mxchat-kb-processing-status {
1787 - color: #555;
1788 - margin-bottom: 20px;
1789 -}
1790 -
1791 -/* ===== Utility Classes ===== */
1792 -.mxchat-na {
1793 - color: #999;
1794 - font-style: italic;
1795 -}
1796 -
1797 -.mxchat-no-records {
1798 - text-align: center;
1799 - color: #666;
1800 - padding: 40px !important;
1801 -}
1802 -
1803 -/* ===== Responsive Design ===== */
470 +/* Responsive Design */
1804 471 @media screen and (max-width: 782px) {
1805 - /* Hero section */
1806 472 div.mxchat-hero h1.mxchat-main-title {
1807 473 font-size: 2.5rem;
1808 474 }
1809 475
@@ -1827,19 +493,9 @@
1827 493
1828 494 .mxchat-search-group input {
1829 495 width: 100%;
1830 496 }
1831 -
1832 - /* ADDED 2.5.6: Responsive filter dropdown */
1833 - .mxchat-filter-group {
1834 - margin-left: 0;
1835 - width: 100%;
1836 - }
1837 -
1838 - .mxchat-filter-group select {
1839 - width: 100%;
1840 - }
1841 -
497 +
1842 498 .mxchat-url-input-group {
1843 499 flex-direction: column;
1844 500 }
1845 501
@@ -1850,2150 +506,39 @@
1850 506
1851 507 .mxchat-content-cell {
1852 508 max-width: 200px;
1853 509 }
1854 -
1855 - /* Modal responsive adjustments */
1856 - .mxchat-kb-modal-content {
1857 - width: 95%;
1858 - max-height: 90vh;
1859 - margin: 20px auto;
1860 - }
1861 -
1862 - .mxchat-kb-modal-filters {
1863 - flex-direction: column;
1864 - align-items: stretch;
1865 - }
1866 -
1867 - .mxchat-kb-search-group {
1868 - max-width: none;
1869 - }
1870 -
1871 - .mxchat-kb-filter-group {
1872 - flex-direction: column;
1873 - }
1874 -
1875 - .mxchat-kb-content-selection {
1876 - max-height: calc(90vh - 250px);
1877 - }
1878 -
1879 - .mxchat-kb-selection-header {
1880 - flex-direction: column;
1881 - align-items: flex-start;
1882 - gap: 10px;
1883 - }
1884 -
1885 - .mxchat-kb-modal-footer {
1886 - flex-direction: column;
1887 - gap: 10px;
1888 - }
1889 -
1890 - .mxchat-kb-modal-footer .mxchat-kb-pagination {
1891 - width: 100%;
1892 - text-align: center;
1893 - }
1894 -
1895 - .mxchat-kb-footer-actions {
1896 - width: 100%;
1897 - flex-direction: column;
1898 - }
1899 -
1900 - .mxchat-kb-button-primary,
1901 - .mxchat-kb-button-secondary {
1902 - width: 100%;
1903 - }
1904 -
1905 - /* Import methods grid */
1906 - .mxchat-import-methods-grid {
1907 - grid-template-columns: 1fr;
1908 - }
1909 -
1910 - /* Primary import card */
1911 - .mxchat-featured-button {
1912 - width: 100%;
1913 - }
1914 510 }
1915 511
1916 -/* ===== Notification Styles ===== */
1917 -
1918 -/* Base notification style */
1919 -.mxchat-kb-notification {
1920 - margin: 15px 20px 15px;
1921 - padding: 15px;
1922 - border-radius: 6px;
1923 - border-left: 4px solid;
1924 - position: relative;
1925 - animation: mxchat-kb-notification-appear 0.3s ease-out;
512 +/* Utility Classes */
513 +.mxchat-na {
514 + color: #999;
515 + font-style: italic;
1926 516 }
1927 517
1928 -@keyframes mxchat-kb-notification-appear {
1929 - from {
1930 - opacity: 0;
1931 - transform: translateY(-10px);
1932 - }
1933 - to {
1934 - opacity: 1;
1935 - transform: translateY(0);
1936 - }
1937 -}
1938 -
1939 -/* Success notification */
1940 -.mxchat-kb-notification.success {
1941 - background-color: #f0f9eb;
1942 - border-color: #67c23a;
1943 - color: #3c763d;
1944 -}
1945 -
1946 -.mxchat-kb-notification.success h4 {
1947 - color: #67c23a;
1948 - margin: 0 0 5px;
1949 - font-size: 16px;
1950 - font-weight: 600;
1951 -}
1952 -
1953 -.mxchat-kb-notification.success::before {
1954 - content: "\f147";
1955 - font-family: dashicons;
1956 - position: absolute;
1957 - right: 15px;
1958 - top: 15px;
1959 - color: #67c23a;
1960 - font-size: 20px;
1961 -}
1962 -
1963 -/* Error notification */
1964 -.mxchat-kb-notification.error {
1965 - background-color: #fef0f0;
1966 - border-color: #d63638;
1967 - color: #a94442;
1968 -}
1969 -
1970 -.mxchat-kb-notification.error h4 {
1971 - color: #d63638;
1972 - margin: 0 0 5px;
1973 - font-size: 16px;
1974 - font-weight: 600;
1975 -}
1976 -
1977 -.mxchat-kb-notification.error::before {
1978 - content: "\f335";
1979 - font-family: dashicons;
1980 - position: absolute;
1981 - right: 15px;
1982 - top: 15px;
1983 - color: #d63638;
1984 - font-size: 20px;
1985 -}
1986 -
1987 -/* Warning notification */
1988 -.mxchat-kb-notification.warning {
1989 - background-color: #fdf6ec;
1990 - border-color: #ff9800;
1991 - color: #8a6d3b;
1992 -}
1993 -
1994 -.mxchat-kb-notification.warning h4 {
1995 - color: #ff9800;
1996 - margin: 0 0 5px;
1997 - font-size: 16px;
1998 - font-weight: 600;
1999 -}
2000 -
2001 -.mxchat-kb-notification.warning::before {
2002 - content: "\f534";
2003 - font-family: dashicons;
2004 - position: absolute;
2005 - right: 15px;
2006 - top: 15px;
2007 - color: #ff9800;
2008 - font-size: 20px;
2009 -}
2010 -
2011 -/* Info notification */
2012 -.mxchat-kb-notification.info {
2013 - background-color: #f4f4fd;
2014 - border-color: #7873f5;
2015 - color: #31708f;
2016 -}
2017 -
2018 -.mxchat-kb-notification.info h4 {
2019 - color: #7873f5;
2020 - margin: 0 0 5px;
2021 - font-size: 16px;
2022 - font-weight: 600;
2023 -}
2024 -
2025 -.mxchat-kb-notification.info::before {
2026 - content: "\f348";
2027 - font-family: dashicons;
2028 - position: absolute;
2029 - right: 15px;
2030 - top: 15px;
2031 - color: #7873f5;
2032 - font-size: 20px;
2033 -}
2034 -
2035 -/* Close button for notifications */
2036 -.mxchat-kb-notification-close {
2037 - position: absolute;
2038 - top: 10px;
2039 - right: 10px;
2040 - cursor: pointer;
2041 - color: inherit;
2042 - opacity: 0.7;
2043 - font-size: 16px;
2044 - line-height: 1;
2045 - transition: opacity 0.2s;
2046 -}
2047 -
2048 -.mxchat-kb-notification-close:hover {
2049 - opacity: 1;
2050 -}
2051 -
2052 -/* Results details section */
2053 -.mxchat-kb-results-details {
2054 - margin-top: 12px;
2055 - padding: 12px;
2056 - border-radius: 4px;
2057 - font-size: 13px;
2058 - line-height: 1.5;
2059 -}
2060 -
2061 -.mxchat-kb-notification.success .mxchat-kb-results-details {
2062 - background-color: rgba(103, 194, 58, 0.05);
2063 - border: 1px solid rgba(103, 194, 58, 0.2);
2064 -}
2065 -
2066 -.mxchat-kb-notification.error .mxchat-kb-results-details {
2067 -
2068 -}
2069 -
2070 -.mxchat-kb-notification.warning .mxchat-kb-results-details {
2071 - background-color: rgba(255, 152, 0, 0.05);
2072 - border: 1px solid rgba(255, 152, 0, 0.2);
2073 -}
2074 -
2075 -.mxchat-kb-notification.info .mxchat-kb-results-details {
2076 - background-color: rgba(120, 115, 245, 0.05);
2077 - border: 1px solid rgba(120, 115, 245, 0.2);
2078 -}
2079 -
2080 -/* Results details title */
2081 -.mxchat-kb-results-details h5 {
2082 - margin: 0 0 10px;
2083 - font-size: 14px;
2084 - font-weight: 600;
2085 -}
2086 -
2087 -.mxchat-kb-notification.success .mxchat-kb-results-details h5 {
2088 - color: #3c763d;
2089 -}
2090 -
2091 -.mxchat-kb-notification.error .mxchat-kb-results-details h5 {
2092 - color: #a94442;
2093 -}
2094 -
2095 -.mxchat-kb-notification.warning .mxchat-kb-results-details h5 {
2096 - color: #8a6d3b;
2097 -}
2098 -
2099 -.mxchat-kb-notification.info .mxchat-kb-results-details h5 {
2100 - color: #31708f;
2101 -}
2102 -
2103 -/* List items in results details */
2104 -.mxchat-kb-results-details ul {
2105 - margin: 0;
2106 - padding-left: 20px;
2107 - list-style-type: disc;
2108 -}
2109 -
2110 -.mxchat-kb-results-details li {
2111 - margin-bottom: 8px;
2112 - padding-left: 3px;
2113 -}
2114 -
2115 -.mxchat-kb-results-details li:last-child {
2116 - margin-bottom: 0;
2117 -}
2118 -
2119 -.mxchat-kb-results-details li strong {
2120 - font-weight: 600;
2121 -}
2122 -
2123 -/* Failed items specific styling */
2124 -.mxchat-kb-results-details li.failed-item {
2125 - color: #d63638;
2126 -}
2127 -
2128 -/* Success items specific styling */
2129 -.mxchat-kb-results-details li.success-item {
2130 - color: #67c23a;
2131 -}
2132 -
2133 -/* Updated items specific styling */
2134 -.mxchat-kb-results-details li.updated-item {
2135 - color: #1e88e5;
2136 -}
2137 -
2138 -/* Processing summary information */
2139 -.mxchat-kb-processing-summary {
2140 - display: flex;
2141 - flex-wrap: wrap;
2142 - gap: 15px;
2143 - margin-top: 10px;
2144 - font-size: 14px;
2145 -}
2146 -
2147 -.mxchat-kb-summary-item {
2148 - display: flex;
2149 - align-items: center;
2150 - gap: 5px;
2151 -}
2152 -
2153 -.mxchat-kb-summary-item .dashicons {
2154 - font-size: 18px;
2155 -}
2156 -
2157 -.mxchat-kb-summary-item.processed .dashicons {
2158 - color: #67c23a;
2159 -}
2160 -
2161 -.mxchat-kb-summary-item.updated .dashicons {
2162 - color: #1e88e5;
2163 -}
2164 -
2165 -.mxchat-kb-summary-item.failed .dashicons {
2166 - color: #d63638;
2167 -}
2168 -
2169 -/* Show more/less toggle for details */
2170 -.mxchat-kb-show-details {
2171 - display: inline-block;
2172 - margin-top: 8px;
2173 - color: #7873f5;
2174 - cursor: pointer;
2175 - font-size: 13px;
2176 - font-weight: 500;
2177 -}
2178 -
2179 -.mxchat-kb-show-details:hover {
2180 - text-decoration: underline;
2181 -}
2182 -
2183 -.mxchat-kb-show-details .dashicons {
2184 - font-size: 16px;
2185 - vertical-align: middle;
2186 - margin-right: 2px;
2187 -}
2188 -
2189 -/* Collapsible details section */
2190 -.mxchat-kb-results-details.collapsed {
2191 - display: none;
2192 -}
2193 -
2194 -/* Responsive styles for notifications */
2195 -@media screen and (max-width: 782px) {
2196 - .mxchat-kb-notification {
2197 - margin: 10px 15px 0;
2198 - padding: 12px;
2199 - }
2200 -
2201 - .mxchat-kb-notification::before {
2202 - display: none;
2203 - }
2204 -
2205 - .mxchat-kb-processing-summary {
2206 - flex-direction: column;
2207 - gap: 8px;
2208 - }
2209 -}
2210 -
2211 -
2212 -
2213 -
2214 -
2215 -/* Tab Navigation */
2216 -.mxchat-kb-tabs-nav {
2217 - display: flex;
2218 - margin-bottom: 20px;
2219 - border-bottom: 1px solid #ccc;
2220 -}
2221 -
2222 -.mxchat-kb-tab-button {
2223 - padding: 10px 15px;
2224 - background: #f1f1f1;
2225 - border: 1px solid #ccc;
2226 - border-bottom: none;
2227 - margin-right: 5px;
2228 - cursor: pointer;
2229 - font-weight: 500;
2230 - border-radius: 5px 5px 0 0;
2231 -}
2232 -
2233 -.mxchat-kb-tab-button.active {
2234 - background: #fff;
2235 - border-bottom: 2px solid #fff;
2236 - position: relative;
2237 - bottom: -1px;
2238 - color: #2271b1;
2239 -}
2240 -
2241 -/* Tab Content */
2242 -.mxchat-kb-tab-content {
2243 - display: none;
2244 -}
2245 -
2246 -.mxchat-kb-tab-content.active {
2247 - display: block;
2248 -}
2249 -
2250 -/* Make the first card in tabs not have top margin */
2251 -.mxchat-kb-tab-content .mxchat-card:first-child {
2252 - margin-top: 0;
2253 -}
2254 -
2255 -
2256 -
2257 -
2258 -
2259 -
2260 -/* Pinecone Settings Tab Styles */
2261 -.mxchat-pinecone-info-box {
2262 - background: #f8f9ff;
2263 - border: 1px solid rgba(120, 115, 245, 0.2);
2264 - border-radius: 10px;
2265 - padding: 20px;
2266 - margin: 20px 0;
2267 - display: flex;
2268 - align-items: flex-start;
2269 - gap: 15px;
2270 -}
2271 -
2272 -.mxchat-info-icon {
2273 - flex-shrink: 0;
2274 -}
2275 -
2276 -.mxchat-info-icon .dashicons {
2277 - color: #7873f5;
2278 - font-size: 24px;
2279 - width: 24px;
2280 - height: 24px;
2281 -}
2282 -
2283 -.mxchat-info-content {
2284 - flex: 1;
2285 -}
2286 -
2287 -.mxchat-info-content h4 {
2288 - margin: 0 0 10px 0;
2289 - color: #333;
2290 - font-size: 16px;
2291 -}
2292 -
2293 -.mxchat-info-content p {
2294 - margin: 0 0 8px 0;
518 +.mxchat-no-records {
519 + text-align: center;
2295 520 color: #666;
2296 - font-size: 14px;
2297 - line-height: 1.5;
521 + padding: 40px !important;
2298 522 }
2299 523
2300 -.mxchat-info-content p:last-child {
2301 - margin-bottom: 0;
2302 -}
2303 524
2304 -.mxchat-info-content a {
2305 - color: #7873f5;
2306 - text-decoration: none;
2307 - font-weight: 500;
2308 -}
2309 525
2310 -.mxchat-info-content a:hover {
2311 - text-decoration: underline;
2312 -}
2313 -
2314 -/* Database Settings Form */
2315 -.mxchat-database-settings-form {
2316 - margin-top: 25px;
2317 -}
2318 -
2319 -/* Toggle Container */
2320 -.mxchat-toggle-container {
2321 - display: flex;
2322 - align-items: center;
2323 - gap: 12px;
2324 - margin: 20px 0;
2325 - padding: 15px 0;
2326 - border-bottom: 1px solid rgba(120, 115, 245, 0.1);
2327 -}
2328 -
2329 -.mxchat-toggle-switch {
2330 - position: relative;
526 +.mxchat-status-badge {
2331 527 display: inline-block;
2332 - width: 50px;
2333 - height: 26px;
2334 -}
2335 -
2336 -.mxchat-toggle-switch input {
2337 - opacity: 0;
2338 - width: 0;
2339 - height: 0;
2340 -}
2341 -
2342 -.mxchat-toggle-slider {
2343 - position: absolute;
2344 - cursor: pointer;
2345 - top: 0;
2346 - left: 0;
2347 - right: 0;
2348 - bottom: 0;
2349 - background-color: #ddd;
2350 - transition: 0.3s;
2351 - border-radius: 26px;
2352 -}
2353 -
2354 -.mxchat-toggle-slider:before {
2355 - position: absolute;
2356 - content: "";
2357 - height: 20px;
2358 - width: 20px;
2359 - left: 3px;
2360 - bottom: 3px;
2361 - background-color: white;
2362 - transition: 0.3s;
2363 - border-radius: 50%;
2364 - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
2365 -}
2366 -
2367 -input:checked + .mxchat-toggle-slider {
2368 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2369 -}
2370 -
2371 -input:checked + .mxchat-toggle-slider:before {
2372 - transform: translateX(24px);
2373 -}
2374 -
2375 -.mxchat-toggle-label {
528 + padding: 3px 8px;
529 + border-radius: 3px;
530 + font-size: 12px;
2376 531 font-weight: 500;
2377 - color: #333;
2378 - font-size: 15px;
532 + text-transform: uppercase;
533 + margin-left: 10px;
2379 534 }
2380 535
2381 -/* Pinecone Settings Section */
2382 -.mxchat-pinecone-settings {
2383 - background: #f8f9ff;
2384 - border: 1px solid rgba(120, 115, 245, 0.2);
2385 - border-radius: 10px;
2386 - padding: 25px;
2387 - margin: 20px 0;
2388 -}
2389 -
2390 -/* Knowledge Warning (Success State) */
2391 -.mxchat-knowledge-warning.success {
2392 - background: #edfaef;
2393 - border-left: 4px solid #46b450;
2394 - padding: 15px;
2395 - margin: 0 0 20px 0;
2396 - border-radius: 4px;
2397 -}
2398 -
2399 -.mxchat-knowledge-warning.success p {
2400 - margin: 0;
2401 - color: #2a4f30;
2402 - align-items: center;
2403 - gap: 8px;
2404 -}
2405 -
2406 -.mxchat-knowledge-warning.success .dashicons {
2407 - color: #46b450;
2408 -}
2409 -
2410 -/* Form Groups */
2411 -.mxchat-form-group {
2412 - margin-bottom: 20px;
2413 -}
2414 -
2415 -.mxchat-form-group label {
2416 - display: block;
2417 - margin-bottom: 8px;
2418 - color: #333;
2419 - font-weight: 500;
2420 - font-size: 14px;
2421 -}
2422 -
2423 -.mxchat-form-group label .required {
2424 - color: #dc3232;
2425 - margin-left: 4px;
2426 -}
2427 -
2428 -.mxchat-form-group input[type="text"],
2429 -.mxchat-form-group input[type="password"] {
2430 - width: 100%;
2431 - max-width: 400px;
2432 - padding: 10px 12px;
2433 - border: 1px solid rgba(120, 115, 245, 0.2);
2434 - border-radius: 6px;
2435 - background: white;
2436 - font-size: 14px;
2437 - transition: border-color 0.2s ease, box-shadow 0.2s ease;
2438 -}
2439 -
2440 -.mxchat-form-group input[type="text"]:focus,
2441 -.mxchat-form-group input[type="password"]:focus {
2442 - border-color: #7873f5;
2443 - outline: none;
2444 - box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.1);
2445 -}
2446 -
2447 -.mxchat-form-group .description {
2448 - margin: 8px 0 0 0;
2449 - color: #666;
2450 - font-size: 13px;
2451 - line-height: 1.4;
2452 -}
2453 -
2454 -.mxchat-form-group .description a {
2455 - color: #7873f5;
2456 - text-decoration: none;
2457 - font-weight: 500;
2458 -}
2459 -
2460 -.mxchat-form-group .description a:hover {
2461 - text-decoration: underline;
2462 -}
2463 -
2464 -/* Setup Help Section */
2465 -.mxchat-pinecone-setup-help {
2466 - background: white;
2467 - border: 1px solid rgba(120, 115, 245, 0.1);
2468 - border-radius: 8px;
2469 - padding: 20px;
2470 - margin-top: 25px;
2471 -}
2472 -
2473 -.mxchat-pinecone-setup-help h3 {
2474 - margin: 0 0 15px 0;
2475 - color: #333;
2476 - font-size: 16px;
2477 -}
2478 -
2479 -.mxchat-pinecone-setup-help ol {
2480 - margin: 0;
2481 - padding-left: 20px;
2482 -}
2483 -
2484 -.mxchat-pinecone-setup-help li {
2485 - margin-bottom: 12px;
2486 - color: #666;
2487 - line-height: 1.5;
2488 -}
2489 -
2490 -.mxchat-pinecone-setup-help li:last-child {
2491 - margin-bottom: 0;
2492 -}
2493 -
2494 -.mxchat-pinecone-setup-help ul {
2495 - margin: 8px 0;
2496 - padding-left: 20px;
2497 -}
2498 -
2499 -.mxchat-pinecone-setup-help ul li {
2500 - margin-bottom: 6px;
2501 - font-size: 13px;
2502 -}
2503 -
2504 -.mxchat-pinecone-setup-help a {
2505 - color: #7873f5;
2506 - text-decoration: none;
2507 - font-weight: 500;
2508 -}
2509 -
2510 -.mxchat-pinecone-setup-help a:hover {
2511 - text-decoration: underline;
2512 -}
2513 -
2514 -/* Connection Status Section */
2515 -.mxchat-pinecone-status-section {
2516 - background: white;
2517 - border: 1px solid rgba(120, 115, 245, 0.1);
2518 - border-radius: 8px;
2519 - padding: 20px;
2520 - margin-top: 25px;
2521 -}
2522 -
2523 -.mxchat-pinecone-status-section h3 {
2524 - margin: 0 0 15px 0;
2525 - color: #333;
2526 - font-size: 16px;
2527 -}
2528 -
2529 -#mxchat-pinecone-test-connection {
2530 - margin-bottom: 15px;
2531 -}
2532 -
2533 -#test-pinecone-connection {
2534 - background: linear-gradient(135deg, #fa73e6, #7873f5);
536 +.mxchat-status-failed {
537 + background-color: #f44336;
2535 538 color: white;
2536 - border: none;
2537 - padding: 10px 20px;
2538 - border-radius: 6px;
2539 - cursor: pointer;
2540 - font-size: 14px;
2541 - font-weight: 500;
2542 - transition: all 0.2s ease;
2543 539 }
2544 540
2545 -#test-pinecone-connection:hover:not(:disabled) {
2546 - transform: translateY(-1px);
2547 - box-shadow: 0 4px 12px rgba(120, 115, 245, 0.3);
2548 -}
2549 -
2550 -#test-pinecone-connection:disabled {
2551 - opacity: 0.6;
2552 - cursor: not-allowed;
2553 - transform: none;
2554 -}
2555 -
2556 -/* Test Result Styles */
2557 -.mxchat-test-result {
2558 - margin-top: 15px;
2559 -}
2560 -
2561 -.mxchat-test-result .notice {
2562 - margin: 0;
2563 - padding: 12px 15px;
2564 - border-radius: 6px;
2565 - display: flex;
2566 - align-items: center;
2567 - gap: 8px;
2568 -}
2569 -
2570 -.mxchat-test-result .notice-success {
2571 - background: #edfaef;
2572 - border-left: 4px solid #46b450;
2573 - color: #2a4f30;
2574 -}
2575 -
2576 -.mxchat-test-result .notice-error {
2577 - background: #fbeaea;
2578 - border-left: 4px solid #dc3232;
2579 - color: #721c24;
2580 -}
2581 -
2582 -.mxchat-test-result .notice .dashicons {
2583 - flex-shrink: 0;
2584 -}
2585 -
2586 -.mxchat-test-result .notice p {
2587 - margin: 0;
2588 - font-size: 14px;
2589 -}
2590 -
2591 -/* Compatibility Notice */
2592 -.mxchat-pinecone-compatibility-notice {
2593 - background: #e8f4ff;
2594 - border-left: 4px solid #2196f3;
2595 - padding: 15px;
2596 - margin: 0 0 20px 0;
2597 - border-radius: 4px;
2598 -}
2599 -
2600 -.mxchat-pinecone-compatibility-notice p {
2601 - margin: 0;
2602 - color: #1565c0;
2603 - font-size: 14px;
2604 - line-height: 1.5;
2605 -}
2606 -
2607 -/* Responsive Design */
2608 -@media screen and (max-width: 782px) {
2609 - .mxchat-pinecone-info-box {
2610 - flex-direction: column;
2611 - gap: 10px;
2612 - }
2613 -
2614 - .mxchat-toggle-container {
2615 - flex-direction: column;
2616 - align-items: flex-start;
2617 - gap: 8px;
2618 - }
2619 -
2620 - .mxchat-form-group input[type="text"],
2621 - .mxchat-form-group input[type="password"] {
2622 - max-width: 100%;
2623 - }
2624 -
2625 - .mxchat-pinecone-settings {
2626 - padding: 15px;
2627 - }
2628 -
2629 - .mxchat-pinecone-setup-help,
2630 - .mxchat-pinecone-status-section {
2631 - padding: 15px;
2632 - }
2633 -}
2634 -
2635 -
2636 -/* Setup Steps */
2637 -.mxchat-setup-steps {
2638 - margin: 30px 0;
2639 - padding: 20px;
2640 - background: #fff;
2641 - border-radius: 10px;
2642 -}
2643 -
2644 -.mxchat-setup-step {
2645 - display: flex;
2646 - align-items: flex-start;
2647 - margin-bottom: 20px;
2648 -}
2649 -
2650 -.step-number {
2651 - background: linear-gradient(135deg, #fa73e6, #7873f5);
541 +.mxchat-status-success {
542 + background-color: #4caf50;
2652 543 color: white;
2653 - width: 28px;
2654 - height: 28px;
2655 - border-radius: 50%;
2656 - display: flex;
2657 - align-items: center;
2658 - justify-content: center;
2659 - font-weight: bold;
2660 - margin-right: 15px;
2661 - flex-shrink: 0;
2662 -}
2663 -
2664 -.step-content {
2665 - flex: 1;
2666 -}
2667 -
2668 -.step-content h4 {
2669 - margin: 0 0 5px 0;
2670 -}
2671 -
2672 -.step-content p {
2673 - margin: 0;
2674 - color: #666;
2675 -}
2676 -
2677 -.step-content ul {
2678 - margin-top: 5px;
2679 - margin-bottom: 0;
2680 - color: #666;
2681 -}
2682 -
2683 -
2684 -
2685 -/* ===== Role-Based Content Restrictions Styles ===== */
2686 -
2687 -/* Role mapping form */
2688 -.mxchat-role-mapping-form {
2689 - margin-top: 20px;
2690 - padding: 20px;
2691 - background-color: #f8f9ff;
2692 - border-radius: 8px;
2693 - border: 1px solid rgba(120, 115, 245, 0.1);
2694 -}
2695 -
2696 -.mxchat-role-mapping-form h4 {
2697 - margin-top: 0;
2698 - margin-bottom: 15px;
2699 - font-size: 16px;
2700 - color: #333;
2701 -}
2702 -
2703 -.mxchat-form-row {
2704 - display: flex;
2705 - gap: 15px;
2706 - align-items: flex-end;
2707 - margin-bottom: 20px;
2708 -}
2709 -
2710 -/* Role mappings table */
2711 -.mxchat-mappings-table {
2712 - width: 100%;
2713 - border-collapse: collapse;
2714 - margin-top: 15px;
2715 - background: #fff;
2716 - box-shadow: 0 1px 3px rgba(120, 115, 245, 0.08);
2717 - border-radius: 8px;
2718 - overflow: hidden;
2719 -}
2720 -
2721 -.mxchat-mappings-table th,
2722 -.mxchat-mappings-table td {
2723 - padding: 15px;
2724 - text-align: left;
2725 - border-bottom: 1px solid rgba(120, 115, 245, 0.1);
2726 -}
2727 -
2728 -.mxchat-mappings-table th {
2729 - background: #f8f9ff;
2730 - font-weight: 600;
2731 - color: #333;
2732 - font-size: 14px;
2733 -}
2734 -
2735 -.mxchat-mappings-table tbody tr {
2736 - transition: background-color 0.2s ease;
2737 -}
2738 -
2739 -.mxchat-mappings-table tbody tr:hover {
2740 - background: rgba(120, 115, 245, 0.03);
2741 -}
2742 -
2743 -.mxchat-mappings-table tbody tr:last-child td {
2744 - border-bottom: none;
2745 -}
2746 -
2747 -/* Tag and role badges */
2748 -.mxchat-tag-badge {
2749 - display: inline-flex;
2750 - align-items: center;
2751 - gap: 5px;
2752 - padding: 5px 12px;
2753 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2754 - color: #fff;
2755 - border-radius: 4px;
2756 - font-size: 13px;
2757 - font-weight: 500;
2758 -}
2759 -
2760 -.mxchat-tag-badge .dashicons {
2761 - font-size: 16px;
2762 - width: 16px;
2763 - height: 16px;
2764 -}
2765 -
2766 -.mxchat-role-badge {
2767 - display: inline-block;
2768 - padding: 5px 12px;
2769 - background: #f0f0f1;
2770 - color: #2c3338;
2771 - border-radius: 4px;
2772 - font-size: 13px;
2773 - font-weight: 500;
2774 -}
2775 -
2776 -/* Role-specific badge colors */
2777 -.mxchat-role-badge.public {
2778 - background: #e8f5e9;
2779 - color: #2e7d32;
2780 -}
2781 -
2782 -.mxchat-role-badge.logged_in {
2783 - background: #e3f2fd;
2784 - color: #1565c0;
2785 -}
2786 -
2787 -.mxchat-role-badge.subscriber {
2788 - background: #f3e5f5;
2789 - color: #7b1fa2;
2790 -}
2791 -
2792 -.mxchat-role-badge.contributor {
2793 - background: #fff3e0;
2794 - color: #e65100;
2795 -}
2796 -
2797 -.mxchat-role-badge.author {
2798 - background: #fff9c4;
2799 - color: #f57f17;
2800 -}
2801 -
2802 -.mxchat-role-badge.editor {
2803 - background: #fce4ec;
2804 - color: #c2185b;
2805 -}
2806 -
2807 -.mxchat-role-badge.administrator {
2808 - background: #ffebee;
2809 - color: #c62828;
2810 -}
2811 -
2812 -/* Mapping actions */
2813 -.mxchat-mapping-actions {
2814 - display: flex;
2815 - gap: 8px;
2816 - align-items: center;
2817 -}
2818 -
2819 -.mxchat-delete-mapping {
2820 - color: #d63638;
2821 - cursor: pointer;
2822 - padding: 6px 10px;
2823 - border-radius: 4px;
2824 - transition: all 0.2s ease;
2825 - display: inline-flex;
2826 - align-items: center;
2827 - gap: 4px;
2828 - background: transparent;
2829 - border: none;
2830 - font-size: 13px;
2831 -}
2832 -
2833 -.mxchat-delete-mapping:hover {
2834 - background: #fef0f0;
2835 - color: #b32d2e;
2836 -}
2837 -
2838 -.mxchat-delete-mapping .dashicons {
2839 - font-size: 18px;
2840 - width: 18px;
2841 - height: 18px;
2842 -}
2843 -
2844 -/* Post count display */
2845 -.mxchat-post-count {
2846 - color: #666;
2847 - font-size: 13px;
2848 - display: flex;
2849 - align-items: center;
2850 - gap: 4px;
2851 -}
2852 -
2853 -.mxchat-post-count .dashicons {
2854 - font-size: 16px;
2855 - width: 16px;
2856 - height: 16px;
2857 - color: #7873f5;
2858 -}
2859 -
2860 -/* Loading state for mappings */
2861 -.mxchat-loading-mappings {
2862 - text-align: center;
2863 - padding: 40px;
2864 - color: #666;
2865 -}
2866 -
2867 -.mxchat-role-spinner {
2868 - display: inline-block;
2869 - width: 20px;
2870 - height: 20px;
2871 - border: 2px solid rgba(120, 115, 245, 0.2);
2872 - border-top: 2px solid #7873f5;
2873 - border-radius: 50%;
2874 - animation: mxchat-role-spin 1s linear infinite;
2875 - margin-right: 10px;
2876 -}
2877 -
2878 -.mxchat-role-spinner.is-active {
2879 - display: inline-block;
2880 -}
2881 -
2882 -@keyframes mxchat-role-spin {
2883 - 0% { transform: rotate(0deg); }
2884 - 100% { transform: rotate(360deg); }
2885 -}
2886 -
2887 -/* Empty state */
2888 -#mxchat-no-mappings {
2889 - text-align: center;
2890 - padding: 40px;
2891 - color: #666;
2892 -}
2893 -
2894 -#mxchat-no-mappings .dashicons {
2895 - font-size: 48px;
2896 - opacity: 0.3;
2897 - margin-bottom: 15px;
2898 - display: block;
2899 -}
2900 -
2901 -#mxchat-no-mappings p {
2902 - margin: 0;
2903 - font-size: 14px;
2904 -}
2905 -
2906 -/* Bulk update section */
2907 -.mxchat-bulk-update-section {
2908 - margin-top: 30px;
2909 - padding-top: 30px;
2910 - border-top: 1px solid rgba(120, 115, 245, 0.1);
2911 -}
2912 -
2913 -.mxchat-bulk-update-section h4 {
2914 - margin-top: 0;
2915 - margin-bottom: 10px;
2916 - font-size: 16px;
2917 - color: #333;
2918 -}
2919 -
2920 -.mxchat-bulk-update-controls {
2921 - margin-top: 15px;
2922 -}
2923 -
2924 -#mxchat-bulk-update-roles {
2925 - display: inline-flex;
2926 - align-items: center;
2927 - gap: 8px;
2928 -}
2929 -
2930 -#mxchat-bulk-update-progress {
2931 - max-width: 600px;
2932 -}
2933 -
2934 -#mxchat-bulk-update-progress .mxchat-progress-bar {
2935 - height: 10px;
2936 - background: rgba(120, 115, 245, 0.1);
2937 - border-radius: 5px;
2938 - overflow: hidden;
2939 -}
2940 -
2941 -#mxchat-bulk-update-progress .mxchat-progress-fill {
2942 - height: 100%;
2943 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2944 - transition: width 0.3s ease;
2945 -}
2946 -
2947 -.mxchat-progress-text {
2948 - margin-top: 10px;
2949 - color: #666;
2950 - font-size: 14px;
2951 -}
2952 -
2953 -/* Bulk update results */
2954 -#mxchat-bulk-update-result {
2955 - margin-top: 15px;
2956 - padding: 15px;
2957 - border-radius: 8px;
2958 -}
2959 -
2960 -#mxchat-bulk-update-result.success {
2961 - background-color: #f0f9eb;
2962 - border-left: 4px solid #67c23a;
2963 - color: #3c763d;
2964 -}
2965 -
2966 -#mxchat-bulk-update-result.error {
2967 - background-color: #fef0f0;
2968 - border-left: 4px solid #d63638;
2969 - color: #a94442;
2970 -}
2971 -
2972 -#mxchat-bulk-update-result h5 {
2973 - margin: 0 0 10px;
2974 - font-size: 15px;
2975 - font-weight: 600;
2976 -}
2977 -
2978 -#mxchat-bulk-update-result p {
2979 - margin: 5px 0;
2980 - font-size: 14px;
2981 -}
2982 -
2983 -/* Role mappings list container */
2984 -.mxchat-role-mappings-list {
2985 - margin-top: 25px;
2986 -}
2987 -
2988 -.mxchat-role-mappings-list h4 {
2989 - margin-top: 0;
2990 - margin-bottom: 15px;
2991 - font-size: 16px;
2992 - color: #333;
2993 -}
2994 -
2995 -/* Info banner styling (reuse existing pattern) */
2996 -.mxchat-role-info-banner {
2997 - display: flex;
2998 - align-items: center;
2999 - gap: 10px;
3000 - padding: 12px 16px;
3001 - margin-bottom: 20px;
3002 - border-radius: 6px;
3003 - font-size: 14px;
3004 - background: #f8f9ff;
3005 - border-left: 4px solid #7873f5;
3006 - color: #333;
3007 -}
3008 -
3009 -.mxchat-role-info-banner .dashicons {
3010 - color: #7873f5;
3011 - font-size: 18px;
3012 -}
3013 -
3014 -/* Responsive adjustments */
3015 -@media screen and (max-width: 782px) {
3016 - .mxchat-form-row {
3017 - flex-direction: column;
3018 - align-items: stretch;
3019 - }
3020 -
3021 - .mxchat-form-row .mxchat-form-group {
3022 - flex: 1;
3023 - max-width: none;
3024 - }
3025 -
3026 - .mxchat-form-row > div {
3027 - padding-bottom: 0;
3028 - }
3029 -
3030 - .mxchat-mappings-table {
3031 - display: block;
3032 - overflow-x: auto;
3033 - }
3034 -
3035 - .mxchat-mappings-table th,
3036 - .mxchat-mappings-table td {
3037 - padding: 10px;
3038 - font-size: 13px;
3039 - }
3040 -
3041 - .mxchat-mapping-actions {
3042 - flex-direction: column;
3043 - align-items: flex-start;
3044 - }
3045 -}
3046 -
3047 -/* RTL Support */
3048 -.rtl .mxchat-mappings-table th,
3049 -.rtl .mxchat-mappings-table td {
3050 - text-align: right;
3051 -}
3052 -
3053 -.rtl .mxchat-tag-badge {
3054 - flex-direction: row-reverse;
3055 -}
3056 -
3057 -.rtl .mxchat-role-info-banner {
3058 - border-left: none;
3059 - border-right: 4px solid #7873f5;
3060 -}
3061 -
3062 -.rtl .mxchat-bulk-update-section {
3063 - border-right: none;
3064 -}
3065 -
3066 -.rtl #mxchat-bulk-update-result {
3067 - border-left: none;
3068 - border-right: 4px solid;
3069 -}
3070 -
3071 -.rtl .mxchat-role-spinner {
3072 - margin-right: 0;
3073 - margin-left: 10px;
3074 -}
3075 -
3076 -/* ===== Chunk Grouping Styles ===== */
3077 -.mxchat-chunk-group-header {
3078 - background: rgba(120, 115, 245, 0.04) !important;
3079 - border-left: 3px solid #7873f5;
3080 -}
3081 -
3082 -.mxchat-chunk-group-header:hover {
3083 - background: rgba(120, 115, 245, 0.08) !important;
3084 -}
3085 -
3086 -.mxchat-chunk-group-info {
3087 - display: flex;
3088 - align-items: center;
3089 - gap: 12px;
3090 -}
3091 -
3092 -.mxchat-chunk-toggle {
3093 - flex-shrink: 0;
3094 - width: 28px;
3095 - height: 28px;
3096 - border: none;
3097 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.1), rgba(120, 115, 245, 0.1));
3098 - border-radius: 6px;
3099 - cursor: pointer;
3100 - display: inline-flex;
3101 - align-items: center;
3102 - justify-content: center;
3103 - transition: all 0.3s ease;
3104 - padding: 0;
3105 -}
3106 -
3107 -.mxchat-chunk-toggle:hover {
3108 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.2), rgba(120, 115, 245, 0.2));
3109 - transform: scale(1.05);
3110 -}
3111 -
3112 -.mxchat-chunk-toggle .dashicons {
3113 - font-size: 16px;
3114 - color: #7873f5;
3115 - transition: transform 0.3s ease;
3116 -}
3117 -
3118 -.mxchat-chunk-toggle.expanded .dashicons {
3119 - transform: rotate(90deg);
3120 -}
3121 -
3122 -.mxchat-chunk-badge {
3123 - display: inline-flex;
3124 - align-items: center;
3125 - padding: 4px 10px;
3126 - background: linear-gradient(135deg, #7873f5, #3ac9d1);
3127 - color: white;
3128 - border-radius: 12px;
3129 - font-size: 12px;
3130 - font-weight: 600;
3131 - white-space: nowrap;
3132 -}
3133 -
3134 -.mxchat-chunk-preview {
3135 - flex: 1;
3136 - color: #666;
3137 - font-size: 13px;
3138 - overflow: hidden;
3139 - text-overflow: ellipsis;
3140 - white-space: nowrap;
3141 -}
3142 -
3143 -.mxchat-chunk-row {
3144 - border-left: 3px solid #e0e0e0;
3145 -}
3146 -
3147 -.mxchat-chunk-row td:first-child {
3148 - padding-left: 30px !important;
3149 -}
3150 -
3151 -.mxchat-chunk-indicator {
3152 - display: inline-flex;
3153 - align-items: center;
3154 - padding: 2px 8px;
3155 - background: #f0f0f0;
3156 - color: #666;
3157 - border-radius: 4px;
3158 - font-size: 11px;
3159 - font-weight: 500;
3160 -}
3161 -
3162 -.mxchat-chunk-label {
3163 - color: #999;
3164 - font-size: 12px;
3165 - font-style: italic;
3166 -}
3167 -
3168 -/* Delete button for chunk groups */
3169 -.delete-button-group {
3170 - background: none;
3171 - border: none;
3172 - cursor: pointer;
3173 - padding: 4px;
3174 - border-radius: 4px;
3175 - transition: all 0.2s ease;
3176 -}
3177 -
3178 -.delete-button-group:hover {
3179 - background: rgba(255, 0, 0, 0.1);
3180 -}
3181 -
3182 -.delete-button-group .dashicons {
3183 - color: #dc3545;
3184 -}
3185 -
3186 -.delete-button-group .dashicons.spin {
3187 - animation: mxchat-spin 1s linear infinite;
3188 -}
3189 -
3190 -@keyframes mxchat-spin {
3191 - from { transform: rotate(0deg); }
3192 - to { transform: rotate(360deg); }
3193 -}
3194 -
3195 -/* ===== Sitemap Detection Styles ===== */
3196 -.dashicons.spin {
3197 - animation: mxchat-spin 1s linear infinite;
3198 -}
3199 -
3200 -.mxchat-sitemap-group.expanded .mxchat-sitemap-sub-list {
3201 - display: block !important;
3202 -}
3203 -
3204 -.mxchat-sitemap-group.expanded .dashicons-arrow-right-alt2 {
3205 - transform: rotate(90deg) !important;
3206 -}
3207 -
3208 -.mxchat-sitemap-row:last-child {
3209 - border-bottom: none !important;
3210 -}
3211 -
3212 -.mxchat-detected-sitemaps {
3213 - margin-top: 24px;
3214 -}
3215 -
3216 -.mxchat-sitemaps-header {
3217 - display: flex;
3218 - align-items: center;
3219 - justify-content: space-between;
3220 - margin-bottom: 16px;
3221 -}
3222 -
3223 -.mxchat-sitemaps-header h4 {
3224 - margin: 0;
3225 - display: flex;
3226 - align-items: center;
3227 - gap: 8px;
3228 -}
3229 -
3230 -.mxchat-sitemaps-header h4 .dashicons {
3231 - color: #7873f5;
3232 -}
3233 -
3234 -.mxchat-sitemap-group {
3235 - margin-bottom: 16px;
3236 - border: 1px solid rgba(120, 115, 245, 0.2);
3237 - border-radius: 8px;
3238 - overflow: hidden;
3239 -}
3240 -
3241 -.mxchat-sitemap-group-header {
3242 - padding: 12px 16px;
3243 - background: #f8fafc;
3244 - display: flex;
3245 - align-items: center;
3246 - justify-content: space-between;
3247 - cursor: pointer;
3248 - transition: background-color 0.2s ease;
3249 -}
3250 -
3251 -.mxchat-sitemap-group-header:hover {
3252 - background: #f0f4f8;
3253 -}
3254 -
3255 -.mxchat-sitemap-sub-list {
3256 - display: none;
3257 - border-top: 1px solid rgba(120, 115, 245, 0.2);
3258 -}
3259 -
3260 -.mxchat-sitemap-row {
3261 - padding: 12px 16px;
3262 - display: flex;
3263 - align-items: center;
3264 - justify-content: space-between;
3265 - border-bottom: 1px solid rgba(120, 115, 245, 0.1);
3266 -}
3267 -
3268 -.mxchat-sitemap-row.sub-item {
3269 - padding-left: 40px;
3270 -}
3271 -
3272 -.mxchat-sitemaps-loading {
3273 - margin-top: 24px;
3274 - padding: 20px;
3275 - text-align: center;
3276 -}
3277 -
3278 -.mxchat-sitemaps-loading .dashicons {
3279 - font-size: 20px;
3280 - color: #7873f5;
3281 -}
3282 -
3283 -.mxchat-sitemaps-loading p {
3284 - margin: 8px 0 0;
3285 - color: #666;
3286 -}
3287 -
3288 -.mxchat-no-sitemaps {
3289 - margin-top: 24px;
3290 - padding: 20px;
3291 - background: #f8fafc;
3292 - border-radius: 8px;
3293 - text-align: center;
3294 -}
3295 -
3296 -.mxchat-no-sitemaps .dashicons {
3297 - font-size: 24px;
3298 - color: #999;
3299 - margin-bottom: 8px;
3300 -}
3301 -
3302 -.mxchat-no-sitemaps p {
3303 - margin: 0;
3304 - color: #666;
3305 -}
3306 -
3307 -/* ===== Admin Notice Dismiss Button Styles ===== */
3308 -.notice.is-dismissible {
3309 - position: relative;
3310 - padding-right: 38px;
3311 -}
3312 -
3313 -.notice-dismiss {
3314 - position: absolute;
3315 - top: 50%;
3316 - right: 8px;
3317 - transform: translateY(-50%);
3318 - padding: 0;
3319 - background: none;
3320 - border: none;
3321 - cursor: pointer;
3322 - color: #787c82;
3323 - width: 24px;
3324 - height: 24px;
3325 - display: flex;
3326 - align-items: center;
3327 - justify-content: center;
3328 - transition: color 0.2s ease;
3329 -}
3330 -
3331 -.notice-dismiss:hover {
3332 - color: #d63638;
3333 -}
3334 -
3335 -.notice-dismiss:before {
3336 - content: "\f153";
3337 - font-family: dashicons;
3338 - font-size: 16px;
3339 - line-height: 1;
3340 -}
3341 -
3342 -.notice-dismiss .screen-reader-text {
3343 - position: absolute;
3344 - width: 1px;
3345 - height: 1px;
3346 - padding: 0;
3347 - margin: -1px;
3348 - overflow: hidden;
3349 - clip: rect(0, 0, 0, 0);
3350 - white-space: nowrap;
3351 - border: 0;
3352 -}
3353 -
3354 -/* ===== AJAX Pagination Styles ===== */
3355 -.mxchat-kb-pagination-wrapper {
3356 - background: #f8fafc;
3357 -}
3358 -
3359 -.mxchat-ajax-pagination {
3360 - display: flex;
3361 - align-items: center;
3362 - justify-content: center;
3363 - gap: 8px;
3364 - flex-wrap: wrap;
3365 -}
3366 -
3367 -.mxchat-page-link {
3368 - display: inline-flex;
3369 - align-items: center;
3370 - justify-content: center;
3371 - min-width: 36px;
3372 - height: 36px;
3373 - padding: 0 12px;
3374 - background: #fff;
3375 - border: 1px solid var(--mxch-card-border, #e5e7eb);
3376 - border-radius: 6px;
3377 - color: var(--mxch-text-primary, #1f2937);
3378 - text-decoration: none;
3379 - font-size: 13px;
3380 - font-weight: 500;
3381 - transition: all 0.2s ease;
3382 - cursor: pointer;
3383 -}
3384 -
3385 -.mxchat-page-link:hover {
3386 - background: var(--mxch-primary, #7873f5);
3387 - border-color: var(--mxch-primary, #7873f5);
3388 - color: #fff;
3389 - text-decoration: none;
3390 -}
3391 -
3392 -.mxchat-page-link.loading {
3393 - opacity: 0.6;
3394 - pointer-events: none;
3395 -}
3396 -
3397 -.mxchat-page-current {
3398 - display: inline-flex;
3399 - align-items: center;
3400 - justify-content: center;
3401 - min-width: 36px;
3402 - height: 36px;
3403 - padding: 0 12px;
3404 - background: var(--mxch-primary, #7873f5);
3405 - border: 1px solid var(--mxch-primary, #7873f5);
3406 - border-radius: 6px;
3407 - color: #fff;
3408 - font-size: 13px;
3409 - font-weight: 600;
3410 -}
3411 -
3412 -.mxchat-page-dots {
3413 - display: inline-flex;
3414 - align-items: center;
3415 - justify-content: center;
3416 - min-width: 24px;
3417 - height: 36px;
3418 - color: var(--mxch-text-muted, #9ca3af);
3419 - font-size: 14px;
3420 -}
3421 -
3422 -.mxchat-pagination-loading {
3423 - margin-left: 12px;
3424 -}
3425 -
3426 -.mxchat-pagination-loading .dashicons {
3427 - color: var(--mxch-primary, #7873f5);
3428 -}
3429 -
3430 -/* Spin animation for loading indicator */
3431 -@keyframes mxchat-spin {
3432 - from { transform: rotate(0deg); }
3433 - to { transform: rotate(360deg); }
3434 -}
3435 -
3436 -.mxchat-pagination-loading .spin,
3437 -.mxchat-ajax-pagination .spin {
3438 - animation: mxchat-spin 1s linear infinite;
3439 -}
3440 -
3441 -/* Mobile responsive pagination */
3442 -@media (max-width: 600px) {
3443 - .mxchat-ajax-pagination {
3444 - gap: 4px;
3445 - }
3446 -
3447 - .mxchat-page-link,
3448 - .mxchat-page-current {
3449 - min-width: 32px;
3450 - height: 32px;
3451 - padding: 0 8px;
3452 - font-size: 12px;
3453 - }
3454 -
3455 - .mxchat-page-dots {
3456 - min-width: 20px;
3457 - }
3458 -}
3459 -
3460 -/* ========================================
3461 - BULK SELECTION STYLES
3462 - ======================================== */
3463 -
3464 -/* Bulk Actions Toolbar */
3465 -.mxchat-bulk-toolbar {
3466 - display: flex;
3467 - align-items: center;
3468 - gap: 12px;
3469 - padding: 12px 16px;
3470 - background: #f8fafc;
3471 - border: 1px solid var(--mxch-card-border);
3472 - border-bottom: none;
3473 - border-radius: var(--mxch-radius-md) var(--mxch-radius-md) 0 0;
3474 -}
3475 -
3476 -.mxchat-bulk-select-label {
3477 - display: flex;
3478 - align-items: center;
3479 - gap: 6px;
3480 - font-size: 13px;
3481 - color: var(--mxch-text-secondary);
3482 - cursor: pointer;
3483 -}
3484 -
3485 -.mxchat-bulk-select-label:hover {
3486 - color: var(--mxch-text-primary);
3487 -}
3488 -
3489 -.mxchat-entry-checkbox,
3490 -.mxchat-entry-checkbox-all {
3491 - width: 16px;
3492 - height: 16px;
3493 - cursor: pointer;
3494 - accent-color: var(--mxch-primary, #7873f5);
3495 -}
3496 -
3497 -.mxchat-bulk-actions {
3498 - display: flex;
3499 - align-items: center;
3500 - gap: 8px;
3501 - margin-left: auto;
3502 -}
3503 -
3504 -.mxchat-bulk-delete {
3505 - display: flex;
3506 - align-items: center;
3507 - gap: 6px;
3508 - color: var(--mxch-error, #dc2626) !important;
3509 - border-color: #fecaca !important;
3510 - background: transparent !important;
3511 -}
3512 -
3513 -.mxchat-bulk-delete:hover:not(:disabled) {
3514 - background: #fef2f2 !important;
3515 - border-color: #fca5a5 !important;
3516 -}
3517 -
3518 -.mxchat-bulk-delete:disabled {
3519 - opacity: 0.5;
3520 - cursor: not-allowed;
3521 -}
3522 -
3523 -.mxchat-selected-count {
3524 - font-size: 12px;
3525 - color: var(--mxch-primary, #7873f5);
3526 - font-weight: 600;
3527 - margin-left: 4px;
3528 -}
3529 -
3530 -/* Delete container - holds Delete All form and Delete Selected button */
3531 -.mxchat-delete-container {
3532 - display: flex;
3533 - align-items: center;
3534 -}
3535 -
3536 -/* Selected row highlighting */
3537 -#mxchat-records-table tr.selected {
3538 - background-color: rgba(120, 115, 245, 0.05) !important;
3539 -}
3540 -
3541 -#mxchat-records-table tr.selected td:first-child {
3542 - position: relative;
3543 -}
3544 -
3545 -#mxchat-records-table tr.selected td:first-child::before {
3546 - content: '';
3547 - position: absolute;
3548 - left: 0;
3549 - top: 0;
3550 - bottom: 0;
3551 - width: 3px;
3552 - background: var(--mxch-primary, #7873f5);
3553 -}
3554 -
3555 -/* Deleting state */
3556 -tr.mxchat-row-deleting {
3557 - opacity: 0.5;
3558 - pointer-events: none;
3559 -}
3560 -
3561 -/* Error state for failed deletions */
3562 -tr.mxchat-row-error {
3563 - background-color: rgba(220, 38, 38, 0.05) !important;
3564 -}
3565 -
3566 -tr.mxchat-row-error td:first-child {
3567 - position: relative;
3568 -}
3569 -
3570 -tr.mxchat-row-error td:first-child::before {
3571 - content: '';
3572 - position: absolute;
3573 - left: 0;
3574 - top: 0;
3575 - bottom: 0;
3576 - width: 3px;
3577 - background: var(--mxch-error, #dc2626);
3578 -}
3579 -
3580 -/* Spin animation for loading states */
3581 -.spin {
3582 - animation: mxchat-spin 1s linear infinite;
3583 -}
3584 -
3585 -/* Responsive adjustments for bulk toolbar */
3586 -@media (max-width: 768px) {
3587 - .mxchat-bulk-toolbar {
3588 - flex-wrap: wrap;
3589 - gap: 8px;
3590 - }
3591 -
3592 - .mxchat-bulk-delete-text {
3593 - display: none;
3594 - }
3595 -
3596 - .mxchat-bulk-actions {
3597 - margin-left: 0;
3598 - }
3599 -}
3600 -
3601 -/* ==========================================================================
3602 - Knowledge Base - Mobile Responsive
3603 - ========================================================================== */
3604 -
3605 -/* Desktop defaults for KB header controls */
3606 -.mxch-kb-header-controls {
3607 - display: flex;
3608 - gap: 10px;
3609 - align-items: center;
3610 -}
3611 -
3612 -.mxch-kb-search-form {
3613 - display: flex;
3614 - gap: 10px;
3615 -}
3616 -
3617 -.mxch-kb-search-input {
3618 - width: 200px;
3619 -}
3620 -
3621 -.mxch-kb-type-filter {
3622 - width: auto;
3623 -}
3624 -
3625 -/* Mobile: Knowledge Base card header stacks vertically */
3626 -@media screen and (max-width: 960px) {
3627 - /* Stack card header vertically */
3628 - #knowledge-base .mxch-card-header {
3629 - flex-direction: column;
3630 - align-items: stretch;
3631 - gap: 12px;
3632 - padding: 12px 16px;
3633 - }
3634 -
3635 - /* Title row wraps badges */
3636 - #knowledge-base .mxch-card-title {
3637 - flex-wrap: wrap;
3638 - font-size: 14px;
3639 - }
3640 -
3641 - /* Controls stack vertically */
3642 - .mxch-kb-header-controls {
3643 - flex-direction: column;
3644 - align-items: stretch;
3645 - gap: 8px;
3646 - width: 100%;
3647 - }
3648 -
3649 - /* Search form wraps */
3650 - .mxch-kb-search-form {
3651 - flex-wrap: wrap;
3652 - gap: 8px;
3653 - width: 100%;
3654 - }
3655 -
3656 - /* Search input takes full width */
3657 - .mxch-kb-search-input {
3658 - width: 100% !important;
3659 - flex: 1;
3660 - min-width: 0;
3661 - }
3662 -
3663 - /* Filter dropdown takes full width */
3664 - .mxch-kb-type-filter {
3665 - width: 100% !important;
3666 - flex: 1;
3667 - min-width: 0;
3668 - }
3669 -
3670 - /* Delete container full width */
3671 - .mxchat-delete-container {
3672 - width: 100%;
3673 - }
3674 -
3675 - .mxchat-delete-container form,
3676 - .mxchat-delete-container .mxchat-bulk-delete {
3677 - width: 100%;
3678 - }
3679 -
3680 - .mxchat-delete-container .mxch-btn {
3681 - width: 100%;
3682 - justify-content: center;
3683 - }
3684 -
3685 - /* Table: hide ID and Source columns on mobile to save space */
3686 - .mxchat-records-table th:nth-child(2),
3687 - .mxchat-records-table td:nth-child(2) {
3688 - display: none;
3689 - }
3690 -
3691 - .mxchat-records-table th:nth-child(4),
3692 - .mxchat-records-table td:nth-child(4) {
3693 - display: none;
3694 - }
3695 -
3696 - /* Content column needs more room */
3697 - .mxchat-content-cell {
3698 - max-width: none !important;
3699 - }
3700 -
3701 - /* Table cells padding */
3702 - .mxchat-records-table th,
3703 - .mxchat-records-table td {
3704 - padding: 10px 8px !important;
3705 - }
3706 -
3707 - /* Pagination wraps nicely */
3708 - .mxchat-ajax-pagination {
3709 - flex-wrap: wrap;
3710 - justify-content: center;
3711 - }
3712 -}
3713 -
3714 -/* Small mobile: further adjustments */
3715 -@media screen and (max-width: 480px) {
3716 - #knowledge-base .mxch-card-header {
3717 - padding: 10px 12px;
3718 - }
3719 -
3720 - #knowledge-base .mxch-card-title {
3721 - font-size: 13px;
3722 - }
3723 -
3724 - /* Search form items fully stacked */
3725 - .mxch-kb-search-form {
3726 - flex-direction: column;
3727 - }
3728 -
3729 - /* Smaller table text */
3730 - .mxchat-records-table {
3731 - font-size: 12px;
3732 - }
3733 -
3734 - .mxchat-records-table th,
3735 - .mxchat-records-table td {
3736 - padding: 8px 6px !important;
3737 - }
3738 -
3739 - /* Also hide Actions header text but keep the column for delete buttons */
3740 - .mxchat-records-table th:nth-child(5) {
3741 - font-size: 0;
3742 - padding: 8px 4px !important;
3743 - width: 40px;
3744 - }
3745 -}
3746 -
3747 -/* ─── Edit Entry Modal ─── */
3748 -
3749 -.mxchat-edit-entry-btn {
3750 - color: var(--mxch-primary, #7873f5);
3751 -}
3752 -.mxchat-edit-entry-btn:hover {
3753 - color: var(--mxch-primary-dark, #5b56d6);
3754 - background: rgba(120, 115, 245, 0.08);
3755 -}
3756 -
3757 -.mxchat-kb-edit-modal-content {
3758 - max-width: 760px;
3759 - max-height: 90vh;
3760 -}
3761 -
3762 -.mxchat-kb-edit-body {
3763 - flex: 1;
3764 - display: flex;
3765 - flex-direction: column;
3766 - padding: 20px;
3767 - overflow: hidden;
3768 - gap: 12px;
3769 -}
3770 -
3771 -.mxchat-kb-edit-source {
3772 - font-size: 12px;
3773 - color: var(--mxch-text-muted, #6b7280);
3774 - word-break: break-all;
3775 -}
3776 -.mxchat-kb-edit-source a {
3777 - color: var(--mxch-primary, #7873f5);
3778 - text-decoration: none;
3779 -}
3780 -
3781 -.mxchat-kb-edit-textarea {
3782 - flex: 1;
3783 - min-height: 300px;
3784 - max-height: 55vh;
3785 - width: 100%;
3786 - padding: 14px;
3787 - border: 1px solid var(--mxch-input-border, #d1d5db);
3788 - border-radius: 8px;
3789 - font-size: 14px;
3790 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
3791 - line-height: 1.6;
3792 - resize: vertical;
3793 - color: var(--mxch-text-primary, #1a1a2e);
3794 - background: var(--mxch-input-bg, #fff);
3795 - box-sizing: border-box;
3796 - transition: border-color 0.2s;
3797 -}
3798 -.mxchat-kb-edit-textarea:focus {
3799 - outline: none;
3800 - border-color: var(--mxch-primary, #7873f5);
3801 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
3802 -}
3803 -
3804 -.mxchat-kb-edit-meta {
3805 - display: flex;
3806 - justify-content: space-between;
3807 - font-size: 12px;
3808 - color: var(--mxch-text-muted, #6b7280);
3809 -}
3810 -
3811 -.mxchat-kb-edit-footer {
3812 - display: flex;
3813 - align-items: center;
3814 - justify-content: space-between;
3815 - padding: 14px 20px;
3816 - border-top: 1px solid #e5e5e5;
3817 - gap: 12px;
3818 -}
3819 -
3820 -.mxchat-kb-edit-notice {
3821 - flex: 1;
3822 - font-size: 13px;
3823 -}
3824 -.mxchat-kb-edit-notice.success { color: #16a34a; }
3825 -.mxchat-kb-edit-notice.error { color: #dc2626; }
3826 -
3827 -.mxchat-kb-edit-actions {
3828 - display: flex;
3829 - gap: 8px;
3830 - flex-shrink: 0;
3831 -}
3832 -
3833 -/* ── Knowledge Inspector modal (plan-d8cb4b) ──────────────────────────
3834 - Read-only "View indexed content" viewer. Reuses the Testing tab's
3835 - match-card / chunk-detail components (admin-testing-tab.css, scoped under
3836 - .mxch-testing-results) so it looks native; this block only adds the modal
3837 - body scroll + the chunk-text container the Testing tab doesn't have. */
3838 -.mxchat-kb-inspect-body {
3839 - flex: 1;
3840 - display: flex;
3841 - flex-direction: column;
3842 - padding: 20px;
3843 - overflow-y: auto;
3844 - gap: 12px;
3845 -}
3846 -/* The modal body is the scroll container — let the inner results grow naturally
3847 - instead of the Testing tab's own 400px inner scroll (avoids a double scrollbar). */
3848 -.mxchat-kb-inspect-body .mxch-testing-results {
3849 - max-height: none;
3850 - overflow: visible;
3851 -}
3852 -.mxch-kb-inspect-chunk-text {
3853 - margin: 8px 0 0;
3854 - padding: 12px 14px;
3855 - background: #f8fafc;
3856 - border: 1px solid #e2e8f0;
3857 - border-radius: 6px;
3858 - max-height: 260px;
3859 - overflow-y: auto;
3860 - white-space: pre-wrap;
3861 - word-break: break-word;
3862 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
3863 - font-size: 13px;
3864 - line-height: 1.6;
3865 - color: var(--mxch-text-primary, #334155);
3866 -}
3867 -
3868 -.mxchat-kb-edit-save-spinner {
3869 - display: inline-flex;
3870 - align-items: center;
3871 - gap: 6px;
3872 -}
3873 -
3874 -@media (max-width: 782px) {
3875 - .mxchat-kb-edit-modal-content {
3876 - width: 96%;
3877 - max-width: 96%;
3878 - margin: 10px auto;
3879 - max-height: 95vh;
3880 - }
3881 - .mxchat-kb-edit-body {
3882 - padding: 14px;
3883 - }
3884 - .mxchat-kb-edit-textarea {
3885 - min-height: 200px;
3886 - font-size: 15px;
3887 - }
3888 - .mxchat-kb-edit-footer {
3889 - flex-direction: column;
3890 - align-items: stretch;
3891 - }
3892 - .mxchat-kb-edit-actions {
3893 - justify-content: stretch;
3894 - }
3895 - .mxchat-kb-edit-actions .mxch-btn {
3896 - flex: 1;
3897 - text-align: center;
3898 - }
3899 -}
3900 -/* ==========================================================================
3901 - Custom Meta-key discovery picker (plan-mxchat-20260709-fe8e4e)
3902 - Canon-token chip picker mirroring the ACF discovery UX for non-ACF meta.
3903 - ========================================================================== */
3904 -.mxchat-meta-scan-controls {
3905 - display: flex;
3906 - align-items: center;
3907 - flex-wrap: wrap;
3908 - gap: 12px;
3909 - margin-bottom: 12px;
3910 -}
3911 -#mxchat-scan-meta-btn {
3912 - display: inline-flex;
3913 - align-items: center;
3914 - gap: 8px;
3915 -}
3916 -.mxchat-meta-scan-internal {
3917 - display: inline-flex;
3918 - align-items: center;
3919 - gap: 6px;
3920 - font-size: 13px;
3921 - color: var(--mxch-text-secondary, #64748b);
3922 - cursor: pointer;
3923 -}
3924 -.mxchat-meta-scan-loading,
3925 -.mxchat-meta-scan-empty {
3926 - font-size: 13px;
3927 - color: var(--mxch-text-secondary, #64748b);
3928 - margin: 8px 0 0;
3929 -}
3930 -.mxchat-meta-chip-grid {
3931 - display: grid;
3932 - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
3933 - gap: 10px;
3934 - margin-top: 12px;
3935 -}
3936 -.mxchat-meta-chip {
3937 - display: flex;
3938 - flex-direction: column;
3939 - align-items: flex-start;
3940 - gap: 4px;
3941 - text-align: left;
3942 - width: 100%;
3943 - padding: 10px 12px;
3944 - background: var(--mxch-card-bg, #fff);
3945 - border: 1px solid var(--mxch-card-border, #e2e8f0);
3946 - border-radius: var(--mxch-radius-md, 8px);
3947 - cursor: pointer;
3948 - transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
3949 -}
3950 -.mxchat-meta-chip:hover {
3951 - border-color: var(--mxch-primary, #7873f5);
3952 - box-shadow: 0 1px 4px rgba(120, 115, 245, 0.15);
3953 -}
3954 -.mxchat-meta-chip-main {
3955 - display: flex;
3956 - align-items: baseline;
3957 - flex-wrap: wrap;
3958 - gap: 8px;
3959 -}
3960 -.mxchat-meta-chip-name {
3961 - font-weight: 600;
3962 - color: var(--mxch-text-primary, #1a1a2e);
3963 - font-size: 13px;
3964 -}
3965 -.mxchat-meta-chip-key {
3966 - font-family: monospace;
3967 - font-size: 11px;
3968 - color: var(--mxch-text-muted, #94a3b8);
3969 - background: #f1f5f9;
3970 - padding: 1px 6px;
3971 - border-radius: 4px;
3972 -}
3973 -.mxchat-meta-chip-meta {
3974 - font-size: 11px;
3975 - color: var(--mxch-text-muted, #94a3b8);
3976 - white-space: nowrap;
3977 - overflow: hidden;
3978 - text-overflow: ellipsis;
3979 - max-width: 100%;
3980 -}
3981 -.mxchat-meta-chip-tick {
3982 - font-size: 11px;
3983 - font-weight: 600;
3984 - color: var(--mxch-primary, #7873f5);
3985 - margin-top: 2px;
3986 -}
3987 -.mxchat-meta-chip.is-added {
3988 - border-color: var(--mxch-success, #10b981);
3989 - background: rgba(16, 185, 129, 0.06);
3990 - cursor: default;
3991 -}
3992 -.mxchat-meta-chip.is-added .mxchat-meta-chip-tick {
3993 - color: var(--mxch-success, #10b981);
3994 -}
3995 -@media (max-width: 782px) {
3996 - .mxchat-meta-chip-grid {
3997 - grid-template-columns: 1fr;
3998 - }
3999 544 }