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