PluginProbe
wpForo Forum / 3.1.0
wpForo Forum v3.1.0
3.1.5 3.1.4 3.1.2 3.1.1 3.1.0 3.0.9 3.0.8 3.0.7 trunk 1.0.0 1.0.1 1.0.2 1.1.0 1.1.1 1.1.2 1.2.0 1.3.0 1.3.1 1.4.0 1.4.1 1.4.10 1.4.11 1.4.12 1.4.13 1.4.2 All 137 releases
wpforo / admin / assets / css / ai-features.css

ai-features.css in wpForo Forum 3.1.0, at admin/assets/css/ai-features.css

9,635 lines 178.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * wpForo AI Features - Admin Styles
3 *
4 * Styles for the AI Features admin page including connection states,
5 * feature lists, usage statistics, and interactive elements.
6 *
7 * @since 3.0.0
8 */
9
10 /* ==========================================================================
11 Main Container
12 ========================================================================== */
13
14 .wpforo-ai-wrap {
15 max-width: 98%;
16 margin: 20px 0;
17 }
18
19 .wpforo-ai-title {
20 display: flex;
21 align-items: center;
22 gap: 10px;
23 margin-bottom: 20px;
24 }
25
26 .wpforo-ai-title .dashicons {
27 font-size: 32px;
28 width: 32px;
29 height: 32px;
30 }
31
32 /* ==========================================================================
33 Box Components
34 ========================================================================== */
35
36 .wpforo-ai-box {
37 background: #fff;
38 border: 1px solid #ccd0d4;
39 border-radius: 4px;
40 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
41 margin-bottom: 20px;
42 }
43
44 .wpforo-ai-box-header {
45 display: flex;
46 justify-content: space-between;
47 align-items: center;
48 padding: 15px 20px;
49 border-bottom: 1px solid #ccd0d4;
50 background: #f9f9f9;
51 }
52
53 .wpforo-ai-box-header h2 {
54 margin: 0;
55 font-size: 18px;
56 font-weight: 600;
57 }
58
59 .wpforo-ai-box-body {
60 padding: 20px;
61 }
62
63 .wpforo-ai-state{
64 width:100%;
65 }
66
67 /* ==========================================================================
68 Status Badges
69 ========================================================================== */
70
71 .wpforo-ai-status-badge {
72 display: inline-flex;
73 align-items: center;
74 gap: 8px;
75 padding: 16px;
76 border-radius: 4px;
77 font-size: 16px;
78 font-weight: 600;
79 background: #eef9ff;
80 color: #155995;
81 }
82
83 .wpforo-ai-status-badge .dashicons {
84 width: 20px;
85 height: 20px;
86 font-size: 20px;
87 }
88
89 .wpforo-ai-status-badge.status-success {
90 background: #d4edda;
91 color: #155724;
92 border: 1px solid #c3e6cb;
93 }
94
95 .wpforo-ai-status-badge.status-warning {
96 background: #fff3cd;
97 color: #856404;
98 border: 1px solid #ffeeba;
99 }
100
101 .wpforo-ai-status-badge.status-error {
102 background: #f8d7da;
103 color: #721c24;
104 border: 1px solid #f5c6cb;
105 }
106
107 .wpforo-ai-status-badge.status-pending {
108 background: #e7f3ff;
109 color: #0056b3;
110 border: 1px solid #b8daff;
111 }
112
113 .wpforo-ai-status-badge.status-inactive {
114 background: #f5f5f5;
115 color: #666666;
116 border: 1px solid #ddd;
117 }
118
119 .wpforo-ai-status-badge.status-enabled {
120 background: #d4edda;
121 color: #155724;
122 border: 1px solid #c3e6cb;
123 }
124
125 .wpforo-ai-status-badge.status-disabled {
126 background: #f5f5f5;
127 color: #666666;
128 border: 1px solid #ddd;
129 }
130
131 .wpforo-ai-status-badge.status-processing,
132 .wpforo-ai-status-badge.status-queued {
133 background: #fff3cd;
134 color: #856404;
135 border: 1px solid #ffeeba;
136 }
137
138 .wpforo-ai-status-badge.status-processing .wpforo-ai-mini-spinner,
139 .wpforo-ai-status-badge.status-queued .wpforo-ai-mini-spinner {
140 display: inline-block;
141 width: 10px;
142 height: 10px;
143 border: 2px solid #ffeeba;
144 border-top-color: #856404;
145 border-radius: 50%;
146 animation: wpforo-mini-spin 0.8s linear infinite;
147 margin: 0 10px 0 2px;
148 vertical-align: text-bottom;
149 }
150
151 .wpforo-ai-status-badge.status-deleting .wpforo-ai-mini-spinner {
152 display: inline-block;
153 width: 10px;
154 height: 10px;
155 border: 2px solid #f5c6cb;
156 border-top-color: #721c24;
157 border-radius: 50%;
158 animation: wpforo-mini-spin 0.8s linear infinite;
159 margin: 0 10px 0 2px;
160 vertical-align: text-bottom;
161 }
162
163 @keyframes wpforo-mini-spin {
164 to { transform: rotate(360deg); }
165 }
166
167 /* ==========================================================================
168 Knowledge Files Table
169 ========================================================================== */
170
171 #knowledge-files-table {
172 table-layout: fixed;
173 }
174
175 #knowledge-files-table .column-name {
176 width: 30%;
177 }
178
179 #knowledge-files-table .column-type {
180 width: 10%;
181 }
182
183 #knowledge-files-table .column-size {
184 width: 10%;
185 }
186
187 #knowledge-files-table .column-chunks {
188 width: 10%;
189 }
190
191 #knowledge-files-table .column-credits {
192 width: 10%;
193 }
194
195 #knowledge-files-table .column-status {
196 width: 12%;
197 }
198
199 #knowledge-files-table .column-actions {
200 width: 18%;
201 }
202
203 #knowledge-files-table .column-actions .wpforo-ai-delete-file {
204 background: none;
205 border: none;
206 padding: 4px;
207 cursor: pointer;
208 color: #b32d2e;
209 line-height: 1.2;
210 }
211
212 #knowledge-files-table .column-actions .wpforo-ai-delete-file:hover {
213 color: #a00;
214 }
215
216 #knowledge-files-table tfoot td {
217 font-weight: 500;
218 }
219
220 #knowledge-files-table tfoot .column-name {
221 font-weight: 600;
222 }
223
224 /* ==========================================================================
225 Pending Approval State
226 ========================================================================== */
227
228 .wpforo-ai-pending-approval .wpforo-ai-description {
229 font-size: 15px;
230 line-height: 1.6;
231 color: #555;
232 margin-bottom: 20px;
233 }
234
235 .wpforo-ai-pending-approval .wpforo-ai-callout-info {
236 background: #e7f3ff;
237 border-left: 4px solid #0073aa;
238 padding: 15px 20px;
239 margin-bottom: 20px;
240 display: flex;
241 align-items: center;
242 gap: 10px;
243 }
244
245 .wpforo-ai-pending-approval .wpforo-ai-callout-info .dashicons {
246 color: #0073aa;
247 }
248
249 .wpforo-ai-pending-actions {
250 margin-top: 20px;
251 padding-top: 20px;
252 border-top: 1px solid #eee;
253 }
254
255 .wpforo-ai-pending-note {
256 color: #666;
257 margin-bottom: 15px;
258 display: flex;
259 align-items: center;
260 gap: 8px;
261 }
262
263 .wpforo-ai-pending-note .dashicons {
264 color: #0073aa;
265 }
266
267 /* ==========================================================================
268 Inactive State
269 ========================================================================== */
270
271 .wpforo-ai-inactive .wpforo-ai-description {
272 font-size: 15px;
273 line-height: 1.6;
274 color: #555;
275 margin-bottom: 20px;
276 }
277
278 .wpforo-ai-inactive .wpforo-ai-callout-warning {
279 background: #f5f5f5;
280 border-left: 4px solid #666;
281 padding: 15px 20px;
282 margin-bottom: 20px;
283 display: flex;
284 align-items: center;
285 gap: 10px;
286 }
287
288 .wpforo-ai-inactive .wpforo-ai-callout-warning .dashicons {
289 color: #666;
290 }
291
292 .wpforo-ai-inactive-actions {
293 margin-top: 20px;
294 padding-top: 20px;
295 border-top: 1px solid #eee;
296 }
297
298 /* ==========================================================================
299 Not Connected State
300 ========================================================================== */
301
302 .wpforo-ai-not-connected .wpforo-ai-description {
303 font-size: 15px;
304 line-height: 1.6;
305 margin: 15px 0;
306 color: #555;
307 }
308
309 .wpforo-ai-callout {
310 display: flex;
311 align-items: flex-start;
312 gap: 12px;
313 padding: 15px 20px;
314 background: #e7f5ff;
315 border-left: 4px solid #2271b1;
316 border-radius: 4px;
317 margin: 20px 0;
318 }
319
320 .wpforo-ai-callout .dashicons {
321 color: #2271b1;
322 font-size: 24px;
323 width: 24px;
324 height: 24px;
325 flex-shrink: 0;
326 margin-top: 2px;
327 }
328
329 .wpforo-ai-callout strong {
330 font-size: 15px;
331 display: block;
332 margin-bottom: 6px;
333 color: #1d2327;
334 }
335
336 .wpforo-ai-callout p {
337 margin: 0;
338 font-size: 13px;
339 color: #555;
340 line-height: 1.5;
341 }
342
343 /* Localhost Warning */
344 .wpforo-ai-localhost-warning {
345 display: flex;
346 align-items: center;
347 gap: 10px;
348 padding: 12px 16px;
349 background: #fef2f2;
350 border: 1px solid #fecaca;
351 border-left: 4px solid #dc2626;
352 border-radius: 4px;
353 margin: 15px 0;
354 color: #991b1b;
355 font-size: 14px;
356 line-height: 1.5;
357 }
358
359 .wpforo-ai-localhost-warning .dashicons {
360 color: #dc2626;
361 font-size: 20px;
362 width: 20px;
363 height: 20px;
364 flex-shrink: 0;
365 }
366
367 .wpforo-ai-not-connected button[disabled] {
368 opacity: 0.6;
369 cursor: not-allowed;
370 }
371
372 /* ==========================================================================
373 Connection Details
374 ========================================================================== */
375
376 .wpforo-ai-connection-details {
377 margin: 20px 0 0 0;
378 }
379
380 .detail-row {
381 display: flex;
382 align-items: center;
383 gap: 10px;
384 padding: 10px 0;
385 border-bottom: 1px solid #f0f0f0;
386 }
387
388 .detail-row:last-child {
389 border-bottom: none;
390 }
391
392 .detail-label {
393 font-weight: 600;
394 min-width: 100px;
395 color: #555;
396 }
397
398 .detail-value {
399 flex: 1;
400 font-family: Consolas, Monaco, monospace;
401 font-size: 13px;
402 padding: 4px 8px;
403 background: #f5f5f5;
404 border-radius: 3px;
405 }
406
407 .wpforo-ai-reveal-key {
408 margin-left: 10px;
409 }
410
411 /* ==========================================================================
412 Credits Section
413 ========================================================================== */
414
415 .wpforo-ai-credits-section {
416 margin: 0;
417 padding: 20px;
418 background: #f8f9fa;
419 border-radius: 6px;
420 border: 1px solid #e1e4e8;
421 }
422
423 .credits-header {
424 display: flex;
425 justify-content: space-between;
426 align-items: center;
427 margin-bottom: 15px;
428 }
429
430 .credits-header h3 {
431 margin: 0;
432 font-size: 16px;
433 font-weight: 600;
434 }
435
436 .credits-numbers {
437 display: flex;
438 align-items: baseline;
439 gap: 5px;
440 font-size: 14px;
441 }
442
443 .credits-numbers strong {
444 font-size: 24px;
445 font-weight: 700;
446 color: #2271b1;
447 }
448
449 .credits-label {
450 color: #666;
451 font-size: 13px;
452 }
453
454 .credits-progress-bar {
455 height: 10px;
456 background: #e1e4e8;
457 border-radius: 5px;
458 overflow: hidden;
459 margin-bottom: 10px;
460 }
461
462 .credits-progress-fill {
463 height: 100%;
464 transition: width 0.3s ease, background-color 0.3s ease;
465 border-radius: 5px;
466 }
467
468 .credits-progress-fill.status-good {
469 background: linear-gradient(90deg, #28a745 0%, #34d058 100%);
470 }
471
472 .credits-progress-fill.status-warning {
473 background: linear-gradient(90deg, #ffc107 0%, #ffca2c 100%);
474 }
475
476 .credits-progress-fill.status-critical {
477 background: linear-gradient(90deg, #dc3545 0%, #e4606d 100%);
478 }
479
480 .credits-info {
481 font-size: 13px;
482 color: #666;
483 }
484
485 /* ==========================================================================
486 Warning/Success Boxes
487 ========================================================================== */
488
489 .wpforo-ai-warning-box,
490 .wpforo-ai-success-box {
491 display: flex;
492 align-items: flex-start;
493 gap: 12px;
494 padding: 15px;
495 border-radius: 4px;
496 margin: 20px 0;
497 }
498
499 .wpforo-ai-warning-box {
500 background: #fff3cd;
501 border-left: 4px solid #ffc107;
502 }
503
504 .wpforo-ai-success-box {
505 background: #d4edda;
506 border-left: 4px solid #28a745;
507 }
508
509 .wpforo-ai-warning-box .dashicons,
510 .wpforo-ai-success-box .dashicons {
511 flex-shrink: 0;
512 width: 20px;
513 height: 20px;
514 font-size: 20px;
515 margin-top: 2px;
516 }
517
518 .wpforo-ai-warning-box p,
519 .wpforo-ai-success-box p {
520 margin: 0;
521 font-size: 14px;
522 line-height: 1.5;
523 }
524
525 /* ==========================================================================
526 Action Buttons
527 ========================================================================== */
528
529 /* Universal button + dashicon alignment fix */
530 .button .dashicons,
531 button .dashicons {
532 vertical-align: middle;
533 line-height: 1;
534 }
535
536 .wpforo-ai-actions {
537 display: flex;
538 gap: 10px;
539 margin-top: 1px;
540 flex-wrap: wrap;
541 }
542
543 .wpforo-ai-actions .button {
544 display: inline-flex;
545 align-items: center;
546 gap: 6px;
547 }
548
549 .wpforo-ai-actions .button .dashicons {
550 width: 18px;
551 height: 18px;
552 font-size: 18px;
553 }
554
555 .wpforo-ai-refresh-form {
556 margin: 0;
557 }
558
559 .wpforo-ai-refresh-rag-status{
560 border-radius: 4px !important;
561 display: flex !important;
562 justify-content: space-between !important;
563 align-items: center !important;
564 gap: 4px !important;
565 margin-left: 5px !important;
566 }
567
568 /* ==========================================================================
569 Features Accordion
570 ========================================================================== */
571
572 .wpforo-ai-features-accordion {
573 margin: 0;
574 }
575
576 .wpforo-ai-features-accordion .accordion-item {
577 border-bottom: 1px solid #e0e0e0;
578 }
579
580 .wpforo-ai-features-accordion .accordion-item:last-child {
581 border-bottom: none;
582 }
583
584 .wpforo-ai-features-accordion .accordion-header {
585 width: 100%;
586 display: flex;
587 align-items: center;
588 gap: 10px;
589 padding: 15px 17px;
590 background: #f9f9f9;
591 border: none;
592 cursor: pointer;
593 font-size: 18px;
594 font-weight: 500;
595 color: #1d2327;
596 text-align: left;
597 transition: background 0.2s ease;
598 }
599
600 .wpforo-ai-features-accordion .accordion-header .accordion-status-icon {
601 flex-shrink: 0;
602 width: 24px;
603 height: 24px;
604 font-size: 24px;
605 }
606
607 .wpforo-ai-features-accordion .plan-unlocked .accordion-status-icon {
608 color: #28a745;
609 }
610
611 .wpforo-ai-features-accordion .plan-locked .accordion-status-icon {
612 color: #999;
613 }
614
615 .wpforo-ai-features-accordion .accordion-header .accordion-title {
616 flex: 1;
617 }
618
619 .wpforo-ai-features-accordion .accordion-header:hover {
620 background: #f0f0f0;
621 }
622
623 .wpforo-ai-features-accordion .accordion-header[aria-expanded="true"] {
624 background: #e8f0fe;
625 border-bottom: 1px solid #d0d8e8;
626 }
627
628 .wpforo-ai-features-accordion .accordion-header .accordion-icon {
629 transition: transform 0.2s ease;
630 color: #646970;
631 }
632
633 .wpforo-ai-features-accordion .accordion-header[aria-expanded="true"] .accordion-icon {
634 transform: rotate(180deg);
635 color: #2271b1;
636 }
637
638 .wpforo-ai-features-accordion .accordion-content {
639 overflow: hidden;
640 transition: height 0.3s ease;
641 }
642
643 .wpforo-ai-features-accordion .current-plan .accordion-header {
644 background: #e8f4ea;
645 }
646
647 .wpforo-ai-features-accordion .current-plan .accordion-header .accordion-title::after {
648 content: " (Your Plan)";
649 font-weight: 400;
650 color: #28a745;
651 font-size: 13px;
652 margin-left: 8px;
653 }
654
655 /* ==========================================================================
656 Features List
657 ========================================================================== */
658
659 .wpforo-ai-features-list {
660 list-style: none;
661 margin: 0;
662 padding: 0;
663 }
664
665 .wpforo-ai-features-list li {
666 display: flex;
667 align-items: flex-start;
668 gap: 15px;
669 padding: 15px;
670 border-bottom: 1px solid #f0f0f0;
671 transition: background 0.2s ease;
672 }
673
674 .wpforo-ai-features-list li:hover {
675 background: #f8f9fa;
676 }
677
678 .wpforo-ai-features-list li:last-child {
679 border-bottom: none;
680 }
681
682 .wpforo-ai-features-list .feature-icon {
683 flex-shrink: 0;
684 width: 24px;
685 height: 24px;
686 margin-top: 2px;
687 display: flex;
688 align-items: center;
689 justify-content: center;
690 }
691
692 .wpforo-ai-features-list .feature-icon svg {
693 width: 22px;
694 height: 22px;
695 color: #666;
696 }
697
698 .feature-info {
699 flex: 1;
700 }
701
702 .feature-info strong {
703 display: inline-block;
704 font-size: 15px;
705 margin-bottom: 5px;
706 }
707
708 .pro-badge {
709 display: inline-block;
710 background: #2271b1;
711 color: #fff;
712 font-size: 11px;
713 font-weight: 600;
714 padding: 2px 8px;
715 border-radius: 3px;
716 text-transform: uppercase;
717 margin-left: 8px;
718 }
719
720 .feature-usage {
721 display: block;
722 font-size: 12px;
723 color: #666;
724 margin-bottom: 5px;
725 }
726
727 .feature-info p {
728 margin: 0;
729 font-size: 13px;
730 color: #666;
731 line-height: 1.5;
732 }
733
734 /* Feature Credits Column */
735 .feature-credits {
736 flex-shrink: 0;
737 min-width: 80px;
738 text-align: center;
739 display: flex;
740 flex-direction: column;
741 align-items: center;
742 justify-content: center;
743 padding: 0 10px;
744 border-left: 1px solid #f0f0f0;
745 margin-left: 15px;
746 }
747
748 .feature-credits .credits-count {
749 font-size: 18px;
750 font-weight: 600;
751 color: #1d2327;
752 line-height: 1.2;
753 }
754
755 .feature-credits .credits-label {
756 font-size: 11px;
757 color: #999;
758 text-transform: uppercase;
759 }
760
761 .feature-credits .credits-locked {
762 color: #ccc;
763 }
764
765 .feature-credits .credits-locked .dashicons {
766 font-size: 24px;
767 width: 24px;
768 height: 24px;
769 }
770
771 .wpforo-ai-features-list .button {
772 display: inline-flex;
773 align-items: center;
774 gap: 6px;
775 align-self: flex-start;
776 margin-top: 5px;
777 }
778
779 /* Feature status indicators */
780 .wpforo-ai-features-list li.feature-enabled > .dashicons {
781 color: #28a745;
782 }
783
784 .wpforo-ai-features-list li.feature-pending > .dashicons {
785 color: #f0ad4e;
786 }
787
788 .wpforo-ai-features-list li.feature-teaser > .dashicons {
789 color: #6f42c1;
790 }
791
792 .wpforo-ai-features-list li.feature-pending {
793 opacity: 0.85;
794 }
795
796 .wpforo-ai-features-list li.feature-pending:hover {
797 opacity: 1;
798 }
799
800 /* ==========================================================================
801 Plan Badges for Features Preview
802 ========================================================================== */
803
804 .plan-badge {
805 flex-shrink: 0;
806 display: inline-block;
807 padding: 4px 12px;
808 font-size: 11px;
809 font-weight: 600;
810 text-transform: uppercase;
811 letter-spacing: 0.5px;
812 border-radius: 20px;
813 white-space: nowrap;
814 min-width: 100px;
815 text-align: center;
816 }
817
818 .plan-badge.plan-starter {
819 background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
820 color: #2e7d32;
821 border: 1px solid #a5d6a7;
822 }
823
824 .plan-badge.plan-professional {
825 background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
826 color: #1565c0;
827 border: 1px solid #90caf9;
828 }
829
830 .plan-badge.plan-business {
831 background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
832 color: #e65100;
833 border: 1px solid #ffcc80;
834 }
835
836 .plan-badge.plan-enterprise {
837 background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
838 color: #7b1fa2;
839 border: 1px solid #ce93d8;
840 }
841
842 /* Coming Soon Badge */
843 .coming-soon-badge {
844 display: inline-block;
845 margin-left: 10px;
846 padding: 0 6px;
847 font-size: 9px;
848 font-weight: 600;
849 text-transform: uppercase;
850 letter-spacing: 0.3px;
851 background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
852 color: #f57c00;
853 border-radius: 3px;
854 vertical-align: middle;
855 }
856
857 /* Feature icon colors by plan */
858 .wpforo-ai-features-preview li.plan-starter .feature-icon svg {
859 color: #2e7d32;
860 }
861
862 .wpforo-ai-features-preview li.plan-professional .feature-icon svg {
863 color: #1565c0;
864 }
865
866 .wpforo-ai-features-preview li.plan-business .feature-icon svg {
867 color: #e65100;
868 }
869
870 .wpforo-ai-features-preview li.plan-enterprise .feature-icon svg {
871 color: #7b1fa2;
872 }
873
874 /* Feature icon colors for pending features (override plan colors) */
875 .wpforo-ai-features-preview li.feature-pending .feature-icon svg {
876 color: #f0ad4e;
877 }
878
879 /* Feature teaser icon */
880 .wpforo-ai-features-preview li.feature-teaser .feature-icon svg {
881 color: #6f42c1;
882 }
883
884 /* ==========================================================================
885 Pricing Table - Modern 2025 Design
886 ========================================================================== */
887
888 .wpforo-ai-pricing-table {
889 margin: 30px 0;
890 overflow-x: auto;
891 }
892
893 /* Modern Table Styling */
894 .pricing-table-modern {
895 width: 100%;
896 border-collapse: separate;
897 border-spacing: 0;
898 background: #fff;
899 border-radius: 12px;
900 overflow: hidden;
901 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
902 }
903
904 .pricing-table-modern thead {
905 background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
906 }
907
908 .pricing-table-modern th {
909 padding: 0;
910 border-right: 1px solid rgba(255, 255, 255, 0.3);
911 vertical-align: top;
912 }
913
914 .pricing-table-modern th:last-child {
915 border-right: none;
916 }
917
918 .pricing-table-modern th.feature-column {
919 width: 30%;
920 padding: 56px 20px;
921 text-align: left;
922 font-size: 23px;
923 font-weight: 500;
924 background: linear-gradient(135deg, #c8c8c8 0%, #fff 100%);
925 color: #5b5b5b;
926 }
927
928 /* Plan Column Base */
929 .pricing-table-modern th.plan-column {
930 width: 17.5%;
931 position: relative;
932 transition: all 0.3s ease;
933 }
934
935 .pricing-table-modern th.plan-column:hover {
936 transform: translateY(-5px);
937 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
938 }
939
940 /* Gradient Colors for Each Plan - WordPress Blue Variations */
941 .pricing-table-modern th.plan-starter {
942 background: linear-gradient(135deg, #4aa3df 0%, #2e7da4 100%);
943 }
944
945 .pricing-table-modern th.plan-professional {
946 background: linear-gradient(135deg, #0073aa 0%, #005177 100%);
947 }
948
949 .pricing-table-modern th.plan-business {
950 background: linear-gradient(135deg, #005177 0%, #003a57 100%);
951 }
952
953 .pricing-table-modern th.plan-enterprise {
954 background: linear-gradient(135deg, #006a8e 0%, #004d6b 100%);
955 }
956
957 /* Active Plan Highlighting - Orange */
958 .pricing-table-modern th.plan-active {
959 background: linear-gradient(135deg, #f56e28 0%, #d54e21 100%) !important;
960 box-shadow: 0 0 0 3px #f56e28, 0 8px 30px rgba(245, 110, 40, 0.4);
961 z-index: 10;
962 transform: scale(1.02);
963 }
964
965 .pricing-table-modern th.plan-active::before {
966 content: '';
967 position: absolute;
968 top: 0;
969 left: 0;
970 right: 0;
971 bottom: 0;
972 background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
973 pointer-events: none;
974 }
975
976 /* Plan Header Container */
977 .plan-header {
978 padding: 30px 20px;
979 text-align: center;
980 position: relative;
981 color: #fff;
982 }
983
984 /* Active Plan Badge */
985 .plan-active-badge {
986 position: absolute;
987 top: 10px;
988 left: 50%;
989 transform: translateX(-50%);
990 background: #fff;
991 color: #d54e21;
992 padding: 6px 16px;
993 border-radius: 20px;
994 font-size: 11px;
995 font-weight: 700;
996 text-transform: uppercase;
997 letter-spacing: 0.5px;
998 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
999 animation: pulse 2s ease-in-out infinite;
1000 }
1001
1002 @keyframes pulse {
1003 0%, 100% { transform: translateX(-50%) scale(1); }
1004 50% { transform: translateX(-50%) scale(1.05); }
1005 }
1006
1007 /* Popular Badge */
1008 .plan-popular-badge {
1009 position: absolute;
1010 top: 10px;
1011 left: 50%;
1012 transform: translateX(-50%);
1013 color: #fff8b1;
1014 padding: 6px 16px;
1015 border-radius: 20px;
1016 font-size: 11px;
1017 font-weight: 700;
1018 text-transform: uppercase;
1019 letter-spacing: 0.5px;
1020 backdrop-filter: blur(10px);
1021 border-top: 2px solid rgba(255, 255, 255, 0.4);
1022 }
1023
1024 /* Plan Name */
1025 .plan-name {
1026 font-size: 24px;
1027 font-weight: 700;
1028 margin: 30px 0 15px 0;
1029 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
1030 }
1031
1032 /* Plan Price */
1033 .plan-price {
1034 margin: 20px 0;
1035 display: flex;
1036 align-items: baseline;
1037 justify-content: center;
1038 gap: 2px;
1039 }
1040
1041 .plan-price .currency {
1042 font-size: 32px;
1043 font-weight: 600;
1044 opacity: 0.9;
1045 }
1046
1047 .plan-price .price-amount {
1048 font-size: 40px;
1049 font-weight: 600;
1050 line-height: 1;
1051 }
1052
1053 .plan-price .billing-period {
1054 font-size: 18px;
1055 font-weight: 400;
1056 opacity: 0.75;
1057 margin-left: 2px;
1058 }
1059
1060 /* Credits Badge (Prominent Display) */
1061 .plan-credits {
1062 display: inline-flex;
1063 align-items: center;
1064 gap: 8px;
1065 background: rgba(255, 255, 255, 0.25);
1066 padding: 12px 20px;
1067 border-radius: 50px;
1068 margin: 15px auto 0;
1069 backdrop-filter: blur(10px);
1070 /* border: 2px solid rgba(255, 255, 255, 0.3); */
1071 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
1072 }
1073
1074 .plan-credits .dashicons {
1075 width: 22px;
1076 height: 22px;
1077 font-size: 22px;
1078 color: #ffd966;
1079 filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
1080 }
1081
1082 .plan-credits strong {
1083 font-size: 20px;
1084 font-weight: 800;
1085 margin-right: 4px;
1086 }
1087
1088 /* Table Body */
1089 .pricing-table-modern tbody tr {
1090 transition: background-color 0.2s ease;
1091 }
1092
1093 .pricing-table-modern tbody tr:hover {
1094 background-color: #f8f9fa;
1095 }
1096
1097 .pricing-table-modern tbody td {
1098 padding: 10px 16px;
1099 border-bottom: 1px solid #e8ecf1;
1100 text-align: center;
1101 font-size: 14px;
1102 }
1103
1104 .pricing-table-modern tbody td:first-child {
1105 text-align: left;
1106 font-weight: 500;
1107 color: #2c3e50;
1108 }
1109
1110 .pricing-table-modern tbody tr:last-child td {
1111 border-bottom: none;
1112 }
1113
1114 /* Feature Category Rows */
1115 .pricing-table-modern tr.feature-category td {
1116 background: linear-gradient(90deg, #f8f9fa 0%, #e8ecf1 100%);
1117 font-weight: 700;
1118 font-size: 13px;
1119 color: #2c3e50;
1120 padding: 10px 16px;
1121 text-align: left;
1122 text-transform: uppercase;
1123 letter-spacing: 0.3px;
1124 border-top: 2px solid #d5dbe3;
1125 }
1126
1127 .pricing-table-modern tr.feature-category td .dashicons {
1128 margin-right: 6px;
1129 color: #0073aa;
1130 width: 16px;
1131 height: 16px;
1132 font-size: 16px;
1133 }
1134
1135 /* Feature Item Rows (Indented) */
1136 .pricing-table-modern tr.feature-item td:first-child {
1137 padding-left: 35px;
1138 font-size: 13px;
1139 /*color: #5a6c7d;*/
1140 font-weight: 400;
1141 }
1142
1143 /* Checkmark and Crossmark */
1144 .pricing-table-modern .checkmark {
1145 display: inline-block;
1146 width: 22px;
1147 height: 22px;
1148 line-height: 22px;
1149 background: linear-gradient(135deg, #46b450 0%, #3a9d44 100%);
1150 color: #fff;
1151 border-radius: 50%;
1152 font-weight: 700;
1153 font-size: 14px;
1154 box-shadow: 0 2px 6px rgba(70, 180, 80, 0.3);
1155 }
1156
1157 .pricing-table-modern .crossmark {
1158 display: inline-block;
1159 width: 22px;
1160 height: 22px;
1161 line-height: 22px;
1162 background: #e8ecf1;
1163 color: #95a5a6;
1164 border-radius: 50%;
1165 font-weight: 700;
1166 font-size: 14px;
1167 }
1168
1169 /* CTA Row */
1170 .pricing-table-modern tr.cta-row td {
1171 padding: 16px 16px;
1172 background: linear-gradient(to bottom, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);
1173 border-bottom: 2px solid #e8ecf1;
1174 }
1175
1176 .pricing-table-modern tr.cta-row:last-child td {
1177 background: linear-gradient(to top, rgba(248, 249, 250, 0) 0%, rgba(248, 249, 250, 1) 100%);
1178 border-bottom: none;
1179 }
1180
1181 /* CTA Buttons - WordPress Style */
1182 .button-cta {
1183 display: inline-flex;
1184 align-items: center;
1185 justify-content: center;
1186 gap: 8px;
1187 padding: 4px 20px !important;
1188 font-size: 14px !important;
1189 font-weight: 400 !important;
1190 border-radius: 3px !important;
1191 transition: all 0.2s ease !important;
1192 text-decoration: none !important;
1193 cursor: pointer;
1194 height: auto !important;
1195 line-height: 2.15384615 !important;
1196 min-height: 32px;
1197 }
1198
1199 /* Primary Button - WordPress Blue */
1200 .button-cta.button-primary {
1201 background: #0073aa !important;
1202 border: 1px solid #0073aa !important;
1203 color: #fff !important;
1204 text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799 !important;
1205 box-shadow: 0 1px 0 #006799 !important;
1206 }
1207
1208 .button-cta.button-primary:hover,
1209 .button-cta.button-primary:focus {
1210 background: #0096dd !important;
1211 border-color: #0096dd !important;
1212 color: #fff !important;
1213 box-shadow: 0 1px 0 #007eb1 !important;
1214 }
1215
1216 .button-cta.button-primary:active {
1217 background: #005177 !important;
1218 border-color: #005177 !important;
1219 box-shadow: inset 0 2px 0 #004357 !important;
1220 }
1221
1222 /* Secondary Button - White with Border */
1223 .button-cta.button-secondary {
1224 background: #f7f7f7 !important;
1225 border: 1px solid #ccd0d4 !important;
1226 color: #2c3338 !important;
1227 text-shadow: none !important;
1228 box-shadow: 0 1px 0 #ccd0d4 !important;
1229 }
1230
1231 .button-cta.button-secondary:hover,
1232 .button-cta.button-secondary:focus {
1233 background: #fafafa !important;
1234 border-color: #8c8f94 !important;
1235 color: #1d2327 !important;
1236 box-shadow: 0 1px 0 #8c8f94 !important;
1237 }
1238
1239 .button-cta.button-secondary:active {
1240 background: #f0f0f1 !important;
1241 border-color: #8c8f94 !important;
1242 box-shadow: inset 0 2px 0 #ccd0d4 !important;
1243 }
1244
1245 /* Plan Active Info */
1246 .plan-active-info {
1247 display: inline-flex;
1248 flex-direction: column;
1249 align-items: center;
1250 gap: 6px;
1251 padding: 12px 20px;
1252 color: #3a9d44;
1253 border-radius: 0;
1254 font-size: 18px;
1255 }
1256
1257 .plan-active-info .dashicons {
1258 width: 25px;
1259 height: 25px;
1260 font-size: 25px;
1261 margin-bottom: 2px;
1262 }
1263
1264 .plan-active-info small {
1265 font-size: 11px;
1266 opacity: 0.9;
1267 font-weight: 500;
1268 }
1269
1270 /* Responsive Design */
1271 @media screen and (max-width: 1200px) {
1272 .pricing-table-modern th.feature-column {
1273 width: 25%;
1274 }
1275 .pricing-table-modern th.plan-column {
1276 width: 18.75%;
1277 }
1278 }
1279
1280 @media screen and (max-width: 768px) {
1281 .wpforo-ai-pricing-table {
1282 overflow-x: scroll;
1283 }
1284 .pricing-table-modern {
1285 min-width: 900px;
1286 }
1287 }
1288
1289 .wpforo-ai-powered-by {
1290 display: flex;
1291 align-items: center;
1292 justify-content: center;
1293 gap: 8px;
1294 margin-top: 20px;
1295 padding: 15px;
1296 background: #f8f9fa;
1297 border-radius: 4px;
1298 font-size: 13px;
1299 color: #666;
1300 }
1301
1302 .wpforo-ai-powered-by .dashicons {
1303 color: #28a745;
1304 }
1305
1306 /* ==========================================================================
1307 Usage Statistics
1308 ========================================================================== */
1309
1310 .wpforo-ai-usage-stats {
1311 margin: 15px 0;
1312 }
1313
1314 .usage-summary {
1315 display: flex;
1316 gap: 20px;
1317 margin-bottom: 20px;
1318 flex-wrap: wrap;
1319 }
1320
1321 .usage-stat-item {
1322 display: flex;
1323 align-items: center;
1324 gap: 12px;
1325 padding: 15px 20px;
1326 background: #f8f9fa;
1327 border-radius: 6px;
1328 border: 1px solid #e1e4e8;
1329 flex: 1;
1330 min-width: 200px;
1331 }
1332
1333 .stat-icon {
1334 width: 32px;
1335 height: 32px;
1336 font-size: 32px;
1337 color: #2271b1;
1338 }
1339
1340 .stat-info {
1341 display: flex;
1342 flex-direction: column;
1343 }
1344
1345 .stat-info strong {
1346 font-size: 24px;
1347 font-weight: 700;
1348 color: #2271b1;
1349 line-height: 1;
1350 }
1351
1352 .stat-label {
1353 font-size: 13px;
1354 color: #666;
1355 margin-top: 4px;
1356 }
1357
1358 .wpforo-ai-usage-table {
1359 width: 100%;
1360 border-collapse: collapse;
1361 margin-top: 15px;
1362 }
1363
1364 .wpforo-ai-usage-table thead th {
1365 text-align: left;
1366 padding: 12px;
1367 background: #f8f9fa;
1368 border-bottom: 2px solid #e1e4e8;
1369 font-weight: 600;
1370 font-size: 13px;
1371 text-transform: uppercase;
1372 color: #555;
1373 }
1374
1375 .wpforo-ai-usage-table tbody td {
1376 padding: 12px;
1377 border-bottom: 1px solid #f0f0f0;
1378 font-size: 14px;
1379 }
1380
1381 .wpforo-ai-usage-table tbody tr:hover {
1382 background: #f8f9fa;
1383 }
1384
1385 .wpforo-ai-no-usage {
1386 text-align: center;
1387 padding: 40px;
1388 color: #999;
1389 font-size: 15px;
1390 }
1391
1392 /* ==========================================================================
1393 Account Information
1394 ========================================================================== */
1395
1396 .wpforo-ai-advanced-info {
1397 margin-bottom: 20px;
1398 }
1399
1400 .info-row {
1401 display: flex;
1402 gap: 10px;
1403 padding: 10px 0;
1404 border-bottom: 1px solid #f0f0f0;
1405 align-items: center;
1406 }
1407
1408 .info-row:last-child {
1409 border-bottom: none;
1410 }
1411
1412 .info-label {
1413 font-weight: 600;
1414 min-width: 120px;
1415 color: #555;
1416 }
1417
1418 .info-value {
1419 flex: 1;
1420 color: #333;
1421 }
1422
1423 .wpforo-ai-advanced-actions {
1424 display: flex;
1425 gap: 10px;
1426 flex-wrap: wrap;
1427 }
1428
1429 .wpforo-ai-advanced-actions .button {
1430 display: inline-flex;
1431 align-items: center;
1432 gap: 6px;
1433 }
1434
1435 /* ==========================================================================
1436 Error State
1437 ========================================================================== */
1438
1439 .wpforo-ai-error-state .wpforo-ai-error-message {
1440 padding: 20px;
1441 background: #fff3cd;
1442 border-left: 4px solid #ffc107;
1443 border-radius: 4px;
1444 margin: 20px 0;
1445 }
1446
1447 .wpforo-ai-error-message p {
1448 margin: 0;
1449 font-size: 15px;
1450 line-height: 1.6;
1451 }
1452
1453 .wpforo-ai-error-actions {
1454 display: flex;
1455 gap: 10px;
1456 margin: 20px 0;
1457 flex-wrap: wrap;
1458 }
1459
1460 .wpforo-ai-error-actions form {
1461 margin: 0;
1462 }
1463
1464 .wpforo-ai-support-info {
1465 margin-top: 30px;
1466 padding: 20px;
1467 background: #f8f9fa;
1468 border-radius: 4px;
1469 text-align: center;
1470 }
1471
1472 .wpforo-ai-support-info p {
1473 margin: 0;
1474 font-size: 14px;
1475 color: #666;
1476 }
1477
1478 /* ==========================================================================
1479 Disconnect Warning Dialog
1480 ========================================================================== */
1481
1482 .wpforo-ai-disconnect-warning {
1483 padding: 15px;
1484 background: #fff3cd;
1485 border-left: 4px solid #ffc107;
1486 border-radius: 4px;
1487 margin-bottom: 20px;
1488 }
1489
1490 .wpforo-ai-disconnect-warning .dashicons {
1491 float: left;
1492 margin-right: 10px;
1493 color: #856404;
1494 font-size: 24px;
1495 width: 24px;
1496 height: 24px;
1497 }
1498
1499 .wpforo-ai-disconnect-warning p {
1500 margin: 5px 0;
1501 line-height: 1.6;
1502 }
1503
1504 /* ==========================================================================
1505 Responsive Design
1506 ========================================================================== */
1507
1508 @media screen and (max-width: 782px) {
1509 .wpforo-ai-pricing-table {
1510 grid-template-columns: 1fr;
1511 }
1512
1513 .credits-header {
1514 flex-direction: column;
1515 align-items: flex-start;
1516 gap: 10px;
1517 }
1518
1519 .wpforo-ai-actions {
1520 flex-direction: column;
1521 }
1522
1523 .wpforo-ai-actions .button {
1524 width: 100%;
1525 justify-content: center;
1526 }
1527
1528 .usage-summary {
1529 flex-direction: column;
1530 }
1531
1532 .detail-row {
1533 flex-direction: column;
1534 align-items: flex-start;
1535 gap: 5px;
1536 }
1537
1538 .info-row {
1539 flex-direction: column;
1540 align-items: flex-start;
1541 gap: 5px;
1542 }
1543 }
1544
1545 /* ==========================================================================
1546 Animations
1547 ========================================================================== */
1548
1549 @keyframes fadeIn {
1550 from {
1551 opacity: 0;
1552 transform: translateY(10px);
1553 }
1554 to {
1555 opacity: 1;
1556 transform: translateY(0);
1557 }
1558 }
1559
1560 .wpforo-ai-box {
1561 animation: fadeIn 0.3s ease-out;
1562 }
1563
1564 /* Loading state for buttons - spin the existing dashicons-update icon */
1565 .button.loading {
1566 pointer-events: none;
1567 opacity: 0.8;
1568 }
1569
1570 .button.loading .dashicons-update {
1571 display: inline-block;
1572 animation: spin 0.8s linear infinite;
1573 }
1574
1575 @keyframes spin {
1576 to {
1577 transform: rotate(360deg);
1578 }
1579 }
1580
1581 /* ==========================================================================
1582 Tab Navigation
1583 ========================================================================== */
1584
1585 .wpforo-ai-tabs {
1586 margin: 10px 0 20px 0;
1587 border-bottom: 1px solid #ccd0d4;
1588 }
1589
1590 .wpforo-ai-tabs .nav-tab {
1591 border: 1px solid #ccd0d4;
1592 border-bottom: none;
1593 color: #555;
1594 font-size: 15px;
1595 padding: 12px 15px;
1596 margin-left: 0;
1597 margin-right: 5px;
1598 transition: all 0.2s ease;
1599 }
1600
1601 .wpforo-ai-tabs .nav-tab:hover {
1602 background: #f0f0f1;
1603 color: #2271b1;
1604 }
1605
1606 .wpforo-ai-tabs .nav-tab-active {
1607 color: #111;
1608 font-weight: 600;
1609 position: relative;
1610 top: 1px;
1611 }
1612
1613 /* AI Settings Tab with board links */
1614 .wpforo-ai-settings-tab {
1615 cursor: default;
1616 float: right;
1617 }
1618
1619 .wpforo-ai-settings-tab a {
1620 color: #2271b1;
1621 text-decoration: none;
1622 transition: all 0.2s ease;
1623 }
1624
1625 .wpforo-ai-settings-tab a:hover {
1626 color: #13aacd;
1627 }
1628
1629 .wpforo-ai-tab-content {
1630 margin-top: 0;
1631
1632 }
1633
1634 .wpforo-ai-state.wpforo-ai-not-connected{
1635 width: 100%;
1636 }
1637
1638 /* ==========================================================================
1639 Storage Settings Box
1640 ========================================================================== */
1641
1642 .wpforo-ai-storage-settings-box {
1643 margin-bottom: 20px;
1644 }
1645
1646 .wpforo-ai-storage-options {
1647 display: flex;
1648 flex-direction: column;
1649 gap: 20px;
1650 }
1651
1652 .wpforo-ai-storage-toggle {
1653 display: flex;
1654 align-items: center;
1655 gap: 20px;
1656 }
1657
1658 .wpforo-ai-toggle-label {
1659 display: flex;
1660 align-items: center;
1661 gap: 20px;
1662 flex-wrap: wrap;
1663 }
1664
1665 .wpforo-ai-toggle-text {
1666 font-weight: 600;
1667 color: #1d2327;
1668 min-width: 120px;
1669 }
1670
1671 .wpforo-ai-toggle-switch {
1672 display: flex;
1673 gap: 0;
1674 background: #f0f0f1;
1675 border-radius: 6px;
1676 padding: 4px;
1677 border: 1px solid #c3c4c7;
1678 }
1679
1680 .wpforo-ai-toggle-switch input[type="radio"] {
1681 display: none;
1682 }
1683
1684 .wpforo-ai-storage-option {
1685 display: inline-flex;
1686 align-items: center;
1687 gap: 8px;
1688 padding: 10px 18px;
1689 border-radius: 4px;
1690 cursor: pointer;
1691 font-size: 14px;
1692 font-weight: 500;
1693 color: #50575e;
1694 background: transparent;
1695 transition: all 0.2s ease;
1696 border: 1px solid transparent;
1697 }
1698
1699 .wpforo-ai-storage-option:hover {
1700 background: #fff;
1701 color: #1d2327;
1702 }
1703
1704 .wpforo-ai-storage-option.active {
1705 background: #fff;
1706 color: #2271b1;
1707 border-color: #2271b1;
1708 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1709 }
1710
1711 .wpforo-ai-storage-option .dashicons {
1712 width: 18px;
1713 height: 18px;
1714 font-size: 18px;
1715 }
1716
1717 .wpforo-ai-storage-info {
1718 margin-top: 5px;
1719 }
1720
1721 .wpforo-ai-storage-recommendation {
1722 display: flex;
1723 align-items: center;
1724 gap: 10px;
1725 padding: 8px 15px;
1726 border-radius: 6px;
1727 font-size: 14px;
1728 }
1729
1730 .wpforo-ai-storage-recommendation.status-good {
1731 background: #eaf7ed;
1732 color: #155724;
1733 border-left: 4px solid #28a745;
1734 }
1735
1736 .wpforo-ai-storage-recommendation.status-warning {
1737 background: #fff3cd;
1738 color: #856404;
1739 border-left: 4px solid #ffc107;
1740 }
1741
1742 .wpforo-ai-storage-recommendation.status-critical {
1743 background: #f8d7da;
1744 color: #721c24;
1745 border-left: 4px solid #dc3545;
1746 }
1747
1748 .wpforo-ai-storage-recommendation.status-info {
1749 background: #e7f3ff;
1750 color: #0c5a93;
1751 border-left: 4px solid #2271b1;
1752 }
1753
1754 .wpforo-ai-storage-recommendation .dashicons {
1755 flex-shrink: 0;
1756 width: 20px;
1757 height: 20px;
1758 font-size: 20px;
1759 }
1760
1761 .wpforo-ai-storage-stats {
1762 /* display: flex; */
1763 display: none;
1764 gap: 24px;
1765 margin-top: 12px;
1766 padding: 12px 16px;
1767 background: #f8f9fa;
1768 border-radius: 6px;
1769 border: 1px solid #e1e4e8;
1770 }
1771
1772 .wpforo-ai-storage-stats .stat-item {
1773 display: flex;
1774 flex-direction: column;
1775 gap: 2px;
1776 }
1777
1778 .wpforo-ai-storage-stats .stat-item strong {
1779 font-size: 18px;
1780 font-weight: 700;
1781 color: #2271b1;
1782 }
1783
1784 .wpforo-ai-storage-options > p.description {
1785 margin-top: 5px;
1786 font-size: 13px;
1787 color: #666;
1788 line-height: 1.6;
1789 }
1790
1791 /* ==========================================================================
1792 AI Content Indexing Status
1793 ========================================================================== */
1794
1795 .wpforo-ai-rag-stats {
1796 display: grid;
1797 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1798 gap: 20px;
1799 margin: 20px 0;
1800 }
1801
1802 .rag-stat-item {
1803 display: flex;
1804 align-items: center;
1805 gap: 15px;
1806 padding: 20px;
1807 background: #f8f9fa;
1808 border-radius: 6px;
1809 border: 1px solid #e1e4e8;
1810 }
1811
1812 .rag-stat-item .stat-icon {
1813 width: 48px;
1814 height: 48px;
1815 display: flex;
1816 align-items: center;
1817 justify-content: center;
1818 background: #fff;
1819 border-radius: 50%;
1820 border: 2px solid #e1e4e8;
1821 }
1822
1823 .rag-stat-item .stat-icon .dashicons {
1824 width: 32px;
1825 height: 32px;
1826 font-size: 32px;
1827 color: #2271b1;
1828 }
1829
1830 .rag-stat-item .stat-info {
1831 flex: 1;
1832 }
1833
1834 .rag-stat-item .stat-value {
1835 font-size: 28px;
1836 font-weight: 700;
1837 color: #2271b1;
1838 line-height: 1;
1839 margin-bottom: 5px;
1840 }
1841
1842 .rag-stat-item .stat-value.status-active {
1843 color: #28a745;
1844 }
1845
1846 .rag-stat-item .stat-value.status-idle {
1847 color: #999;
1848 }
1849
1850 .rag-stat-item .stat-value .rag-queued-count {
1851 font-size: 16px;
1852 font-weight: 400;
1853 color: #da3cdf;
1854 }
1855
1856 .rag-stat-item .stat-label {
1857 font-size: 13px;
1858 color: #666;
1859 }
1860
1861 /* Spinning icon for active indexing */
1862 .wpforo-spin,
1863 .dashicons-spin {
1864 animation: wpforo-spin 1s linear infinite;
1865 display: inline-block;
1866 }
1867
1868 @keyframes wpforo-spin {
1869 0% { transform: rotate(0deg); }
1870 100% { transform: rotate(-360deg); }
1871 }
1872
1873 /* Status badge spinner - rotates clockwise for dashicons-update arrows */
1874 .wpforo-status-spin {
1875 display: inline-block;
1876 animation: wpforo-status-spin 1s linear infinite;
1877 }
1878
1879 @keyframes wpforo-status-spin {
1880 0% { transform: rotate(0deg); }
1881 100% { transform: rotate(360deg); }
1882 }
1883
1884 /* Save button spinner - rotates clockwise for natural loading appearance */
1885 .wpforo-save-spin {
1886 display: inline-block;
1887 animation: wpforo-save-spin 1s linear infinite;
1888 }
1889
1890 @keyframes wpforo-save-spin {
1891 0% { transform: rotate(0deg); }
1892 100% { transform: rotate(360deg); }
1893 }
1894
1895 /* RAG Indexing Status spinner - flipped icon with correct rotation direction */
1896 .wpforo-rag-status-spin {
1897 display: inline-block;
1898 transform: scaleX(-1);
1899 animation: wpforo-rag-status-spin 1s linear infinite;
1900 }
1901
1902 @keyframes wpforo-rag-status-spin {
1903 0% { transform: scaleX(-1) rotate(0deg); }
1904 100% { transform: scaleX(-1) rotate(-360deg); }
1905 }
1906
1907 /* WordPress Content Indexing spinner - flipped icon with correct rotation direction */
1908 .wpforo-wp-indexing-spin {
1909 display: inline-block;
1910 transform: scaleX(-1);
1911 animation: wpforo-wp-indexing-spin 1s linear infinite;
1912 }
1913
1914 @keyframes wpforo-wp-indexing-spin {
1915 0% { transform: scaleX(-1) rotate(0deg); }
1916 100% { transform: scaleX(-1) rotate(360deg); }
1917 }
1918
1919 /* ==========================================================================
1920 RAG Progress Bar
1921 ========================================================================== */
1922
1923 .wpforo-ai-rag-progress {
1924 margin: 20px 0;
1925 }
1926
1927 .rag-progress-bar {
1928 height: 20px;
1929 background: #e1e4e8;
1930 border-radius: 10px;
1931 overflow: hidden;
1932 position: relative;
1933 }
1934
1935 .rag-progress-fill {
1936 height: 100%;
1937 background: linear-gradient(90deg, #2271b1 0%, #3582c4 100%);
1938 transition: width 0.5s ease;
1939 display: flex;
1940 align-items: center;
1941 justify-content: center;
1942 color: #fff;
1943 font-size: 12px;
1944 font-weight: 600;
1945 }
1946
1947 .rag-progress-info {
1948 display: flex;
1949 justify-content: space-between;
1950 font-size: 13px;
1951 color: #666;
1952 margin-top: 8px;
1953 }
1954
1955 /* ==========================================================================
1956 RAG Forum Content Indexing Form
1957 ========================================================================== */
1958
1959 .wpforo-ai-manual-ingest-form {
1960 margin: 20px 0;
1961 }
1962
1963 .wpforo-ai-manual-ingest-form .form-row {
1964 margin-bottom: 15px;
1965 }
1966
1967 .wpforo-ai-manual-ingest-form label {
1968 display: block;
1969 font-weight: 600;
1970 margin-bottom: 8px;
1971 color: #555;
1972 }
1973
1974 .wpforo-ai-manual-ingest-form input[type="text"] {
1975 width: 100%;
1976 padding: 8px 12px;
1977 font-size: 14px;
1978 border: 1px solid #ccd0d4;
1979 border-radius: 4px;
1980 }
1981
1982 .wpforo-ai-manual-ingest-form input[type="text"]:focus {
1983 border-color: #2271b1;
1984 outline: none;
1985 box-shadow: 0 0 0 1px #2271b1;
1986 }
1987
1988 .wpforo-ai-manual-ingest-form .description {
1989 font-size: 13px;
1990 color: #666;
1991 margin-top: 5px;
1992 font-style: italic;
1993 }
1994
1995 .wpforo-ai-manual-ingest-form .form-actions {
1996 margin-top: 15px;
1997 }
1998
1999 /* ==========================================================================
2000 RAG Bulk Actions
2001 ========================================================================== */
2002
2003 .wpforo-ai-bulk-actions {
2004 margin: 20px 0;
2005 }
2006
2007 .bulk-action-item {
2008 display: flex;
2009 align-items: center;
2010 justify-content: space-between;
2011 padding: 20px;
2012 background: #f8f9fa;
2013 border: 1px solid #e1e4e8;
2014 border-radius: 6px;
2015 margin-bottom: 15px;
2016 gap: 20px;
2017 }
2018
2019 .bulk-action-item.bulk-action-danger {
2020 background: #fff5f5;
2021 border-color: #ffc9c9;
2022 }
2023
2024 .bulk-action-item.bulk-action-warning {
2025 background: #fff9e6;
2026 border-color: #ffe066;
2027 }
2028
2029 .bulk-action-item .action-info {
2030 flex: 1;
2031 }
2032
2033 .bulk-action-item .action-info h3 {
2034 margin: 0 0 8px 0;
2035 font-size: 16px;
2036 font-weight: 600;
2037 color: #333;
2038 }
2039
2040 .bulk-action-item .action-info p {
2041 margin: 0;
2042 font-size: 13px;
2043 color: #666;
2044 line-height: 1.5;
2045 }
2046
2047 .bulk-action-item .action-controls {
2048 flex-shrink: 0;
2049 }
2050
2051 .bulk-action-item .button-large {
2052 display: inline-flex;
2053 align-items: center;
2054 gap: 6px;
2055 min-width: 140px;
2056 }
2057
2058 /* Danger button styling */
2059 .button-danger {
2060 background: #dc3545;
2061 border-color: #dc3545;
2062 color: #fff;
2063 }
2064
2065 .button-danger:hover {
2066 background: #c82333;
2067 border-color: #bd2130;
2068 color: #fff;
2069 }
2070
2071 .button-danger:focus {
2072 background: #c82333;
2073 border-color: #bd2130;
2074 box-shadow: 0 0 0 1px #dc3545;
2075 }
2076
2077 /* ==========================================================================
2078 RAG Queue Info
2079 ========================================================================== */
2080
2081 .wpforo-ai-queue-info {
2082 margin: 20px 0;
2083 padding: 15px 20px;
2084 background: #e7f5ff;
2085 border-left: 4px solid #2271b1;
2086 border-radius: 4px;
2087 }
2088
2089 .queue-info-grid {
2090 display: grid;
2091 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2092 gap: 15px;
2093 margin-top: 10px;
2094 }
2095
2096 .queue-info-item {
2097 display: flex;
2098 align-items: center;
2099 gap: 10px;
2100 }
2101
2102 .queue-info-item .dashicons {
2103 color: #2271b1;
2104 font-size: 20px;
2105 width: 20px;
2106 height: 20px;
2107 }
2108
2109 .queue-info-item .info-label {
2110 font-size: 12px;
2111 color: #666;
2112 text-transform: uppercase;
2113 letter-spacing: 0.5px;
2114 }
2115
2116 .queue-info-item .info-value {
2117 font-size: 20px;
2118 font-weight: 700;
2119 color: #2271b1;
2120 }
2121
2122 /* ==========================================================================
2123 Print Styles
2124 ========================================================================== */
2125
2126 @media print {
2127 .wpforo-ai-actions,
2128 .wpforo-ai-advanced-actions,
2129 .wpforo-ai-refresh-form {
2130 display: none;
2131 }
2132 }
2133
2134 /* ==========================================================================
2135 Responsive Design - RAG Specific
2136 ========================================================================== */
2137
2138 @media screen and (max-width: 782px) {
2139 .wpforo-ai-rag-stats {
2140 grid-template-columns: 1fr;
2141 }
2142
2143 .bulk-action-item {
2144 flex-direction: column;
2145 align-items: flex-start;
2146 }
2147
2148 .bulk-action-item .action-controls {
2149 width: 100%;
2150 }
2151
2152 .bulk-action-item .button-large {
2153 width: 100%;
2154 justify-content: center;
2155 }
2156
2157 .queue-info-grid {
2158 grid-template-columns: 1fr;
2159 }
2160 }
2161
2162 /* Chunking Configuration */
2163 .wpforo-ai-chunking-config-box {
2164 margin-bottom: 25px;
2165 }
2166
2167 .wpforo-ai-chunking-settings {
2168 display: flex;
2169 flex-direction: column;
2170 gap: 20px;
2171 }
2172
2173 .chunking-setting-row {
2174 display: flex;
2175 justify-content: space-between;
2176 align-items: flex-start;
2177 padding: 15px;
2178 background: #f9f9f9;
2179 border-radius: 6px;
2180 border: 1px solid #e0e0e0;
2181 }
2182
2183 .chunking-setting-row .setting-label {
2184 flex: 1;
2185 margin-right: 20px;
2186 }
2187
2188 .chunking-setting-row .setting-label label {
2189 font-weight: 600;
2190 color: #23282d;
2191 display: block;
2192 margin-bottom: 5px;
2193 }
2194
2195 .chunking-setting-row .setting-label .description {
2196 margin-top: 8px;
2197 margin-bottom: 0;
2198 font-size: 13px;
2199 }
2200
2201 .chunking-setting-row .setting-control {
2202 flex: 0 0 250px;
2203 text-align: right;
2204 }
2205
2206 .chunking-setting-row .setting-control input[type="number"] {
2207 width: 120px;
2208 padding: 8px 12px;
2209 font-size: 14px;
2210 border: 1px solid #dcdcdc;
2211 border-radius: 4px;
2212 }
2213
2214 .chunking-setting-row .input-hint {
2215 display: block;
2216 font-size: 11px;
2217 color: #666;
2218 margin-top: 4px;
2219 }
2220
2221 .chunking-info-notice {
2222 display: flex;
2223 align-items: flex-start;
2224 padding: 15px;
2225 background: #e7f3ff;
2226 border-left: 4px solid #0073aa;
2227 border-radius: 4px;
2228 margin-top: 10px;
2229 }
2230
2231 .chunking-info-notice .dashicons {
2232 color: #0073aa;
2233 margin-right: 10px;
2234 flex-shrink: 0;
2235 }
2236
2237 .chunking-info-notice .notice-content {
2238 flex: 1;
2239 }
2240
2241 .chunking-actions {
2242 margin-top: 20px;
2243 padding-top: 15px;
2244 border-top: 1px solid #ddd;
2245 text-align: right;
2246 }
2247
2248 .chunking-actions .button {
2249 display: inline-flex;
2250 align-items: center;
2251 gap: 6px;
2252 min-width: 180px;
2253 }
2254
2255 .chunking-info-notice strong {
2256 display: block;
2257 margin-bottom: 8px;
2258 color: #0073aa;
2259 }
2260
2261 .chunking-info-notice ul {
2262 margin: 0;
2263 padding-left: 20px;
2264 list-style: disc;
2265 }
2266
2267 .chunking-info-notice li {
2268 margin-bottom: 5px;
2269 font-size: 13px;
2270 color: #555;
2271 }
2272
2273 /* Responsive styles for chunking config */
2274 @media screen and (max-width: 782px) {
2275 .chunking-setting-row {
2276 flex-direction: column;
2277 }
2278
2279 .chunking-setting-row .setting-label {
2280 margin-right: 0;
2281 margin-bottom: 12px;
2282 }
2283
2284 .chunking-setting-row .setting-control {
2285 flex: 1;
2286 width: 100%;
2287 text-align: left;
2288 }
2289
2290 .chunking-setting-row .setting-control input[type="number"] {
2291 width: 100%;
2292 max-width: 300px;
2293 }
2294 }
2295
2296 /* ==========================================================================
2297 Search Test Box
2298 ========================================================================== */
2299
2300 .wpforo-ai-search-test-box .form-row {
2301 margin-bottom: 20px;
2302 }
2303
2304 .wpforo-ai-search-test-box .form-row label {
2305 display: block;
2306 font-weight: 600;
2307 margin-bottom: 8px;
2308 color: #1d2327;
2309 }
2310
2311 .wpforo-ai-search-test-box .form-actions {
2312 display: flex;
2313 align-items: center;
2314 gap: 10px;
2315 margin-top: 20px;
2316 }
2317
2318 .wpforo-ai-search-test-box .spinner {
2319 visibility: hidden;
2320 }
2321
2322 .wpforo-ai-search-test-box .spinner.is-active {
2323 visibility: visible;
2324 }
2325
2326 /* Search Results */
2327 .wpforo-ai-search-results {
2328 margin-top: 30px;
2329 padding-top: 20px;
2330 border-top: 2px solid #e5e5e5;
2331 }
2332
2333 .wpforo-ai-search-results h3 {
2334 margin-top: 0;
2335 margin-bottom: 20px;
2336 color: #1d2327;
2337 font-size: 16px;
2338 }
2339
2340 .search-query-info {
2341 background: #f0f6fc;
2342 border-left: 4px solid #0073aa;
2343 padding: 12px 15px;
2344 margin-bottom: 15px;
2345 font-size: 14px;
2346 }
2347
2348 .search-query-info p {
2349 margin: 0;
2350 }
2351
2352 .search-credit-info {
2353 margin-bottom: 20px;
2354 }
2355
2356 .search-results-list {
2357 display: flex;
2358 flex-direction: column;
2359 gap: 20px;
2360 }
2361
2362 .search-result-item {
2363 background: #fff;
2364 border: 1px solid #ddd;
2365 border-radius: 4px;
2366 padding: 15px;
2367 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
2368 }
2369
2370 .search-result-item .result-header {
2371 display: flex;
2372 align-items: center;
2373 gap: 10px;
2374 margin-bottom: 10px;
2375 padding-bottom: 8px;
2376 border-bottom: 1px solid #e5e5e5;
2377 font-size: 13px;
2378 color: #666;
2379 }
2380
2381 .search-result-item .result-title {
2382 margin: 0 0 10px 0;
2383 font-size: 16px;
2384 color: #0073aa;
2385 line-height: 1.4;
2386 }
2387
2388 .search-result-item .result-excerpt {
2389 margin: 0 0 12px 0;
2390 color: #555;
2391 font-size: 14px;
2392 line-height: 1.6;
2393 }
2394
2395 .search-result-item .result-url {
2396 margin: 0 0 12px 0;
2397 font-size: 13px;
2398 }
2399
2400 .search-result-item .result-url code {
2401 background: #f5f5f5;
2402 padding: 3px 8px;
2403 border-radius: 3px;
2404 font-size: 12px;
2405 color: #d63638;
2406 }
2407
2408 .search-result-item .result-metadata {
2409 margin: 15px 0;
2410 background: #f9f9f9;
2411 border: 1px solid #ddd;
2412 border-radius: 4px;
2413 padding: 12px;
2414 }
2415
2416 .search-result-item .result-metadata strong {
2417 display: block;
2418 margin-bottom: 8px;
2419 color: #1d2327;
2420 font-size: 13px;
2421 }
2422
2423 .search-result-item .result-metadata pre,
2424 .search-result-item .result-full-json pre {
2425 background: #282c34;
2426 color: #abb2bf;
2427 padding: 12px;
2428 border-radius: 4px;
2429 overflow-x: auto;
2430 font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
2431 font-size: 12px;
2432 line-height: 1.5;
2433 margin: 0;
2434 max-height: 300px;
2435 overflow-y: auto;
2436 white-space: pre-wrap;
2437 }
2438
2439 .search-result-item .toggle-json-btn {
2440 margin-top: 10px;
2441 font-size: 12px;
2442 }
2443
2444 .search-result-item .result-full-json {
2445 margin-top: 10px;
2446 background: #f9f9f9;
2447 border: 1px solid #ddd;
2448 border-radius: 4px;
2449 padding: 12px;
2450 }
2451
2452 /* Empty state */
2453 .search-results-list:empty::after {
2454 content: 'No results to display';
2455 display: block;
2456 padding: 20px;
2457 text-align: center;
2458 color: #666;
2459 font-style: italic;
2460 }
2461
2462 /* Responsive */
2463 @media screen and (max-width: 782px) {
2464 .search-result-item .result-metadata pre,
2465 .search-result-item .result-full-json pre {
2466 font-size: 11px;
2467 padding: 10px;
2468 }
2469 }
2470
2471 /* ==========================================================================
2472 Forum Content Indexing - Two Column Layout
2473 ========================================================================== */
2474
2475 .wpforo-ai-ingest-grid {
2476 display: grid;
2477 grid-template-columns: 1fr 1fr;
2478 gap: 30px;
2479 margin-top: 20px;
2480 }
2481
2482 .wpforo-ai-ingest-column {
2483 background: #f9f9f9;
2484 border: 1px solid #dcdcde;
2485 border-radius: 4px;
2486 padding: 20px;
2487 }
2488
2489 .wpforo-ai-ingest-column h3 {
2490 margin: 0 0 10px 0;
2491 font-size: 16px;
2492 font-weight: 600;
2493 color: #1d2327;
2494 border-bottom: 1px solid #dcdcde;
2495 padding-bottom: 10px;
2496 }
2497
2498 .wpforo-ai-ingest-column .description {
2499 margin: 10px 0 15px 0;
2500 color: #646970;
2501 font-size: 13px;
2502 }
2503
2504 /* Forum Checklist */
2505 .wpforo-ai-forum-checklist {
2506 background: #fff;
2507 border: 1px solid #c3c4c7;
2508 border-radius: 4px;
2509 max-height: 288px;
2510 overflow-y: auto;
2511 padding: 10px;
2512 margin-bottom: 15px;
2513 }
2514
2515 .wpforo-ai-forum-checklist-scrollable {
2516 max-height: 250px;
2517 overflow-y: auto;
2518 }
2519
2520 /* Forum Select Actions (Select All / Deselect All) */
2521 .wpforo-ai-forum-select-actions {
2522 margin-bottom: 8px;
2523 font-size: 12px;
2524 }
2525
2526 .wpforo-ai-forum-select-actions a {
2527 text-decoration: none;
2528 color: #2271b1;
2529 }
2530
2531 .wpforo-ai-forum-select-actions a:hover {
2532 color: #135e96;
2533 text-decoration: underline;
2534 }
2535
2536 /* User Select Dropdown */
2537 .wpforo-ai-user-select {
2538 width: 100%;
2539 max-width: 400px;
2540 }
2541
2542 .wpforo-ai-forum-checkbox-item {
2543 display: block;
2544 padding: 4px 12px;
2545 margin: 0;
2546 cursor: pointer;
2547 border-radius: 3px;
2548 transition: background-color 0.15s ease;
2549 }
2550
2551 .wpforo-ai-forum-checkbox-item:hover {
2552 background-color: #f6f7f7;
2553 }
2554
2555 .wpforo-ai-forum-checkbox-item input[type="checkbox"] {
2556 margin: 0 8px 0 0;
2557 vertical-align: middle;
2558 }
2559
2560 .wpforo-ai-forum-child {
2561 padding-left: 32px;
2562 font-size: 13px;
2563 }
2564
2565 .wpforo-ai-forum-parent {
2566 border-top: 1px solid #f0f0f1;
2567 margin-top: 5px;
2568 padding-top: 8px;
2569 }
2570
2571 .wpforo-ai-forum-parent:first-child {
2572 border-top: none;
2573 margin-top: 0;
2574 }
2575
2576 .wpforo-ai-forum-category {
2577 font-weight: 600;
2578 }
2579
2580 .wpforo-ai-forum-indent {
2581 color: #8c8f94;
2582 margin-right: 5px;
2583 }
2584
2585 /* Forum Actions */
2586 .wpforo-ai-forum-actions {
2587 display: flex;
2588 gap: 8px;
2589 margin-bottom: 15px;
2590 }
2591
2592 .wpforo-ai-forum-actions .button {
2593 display: inline-flex;
2594 align-items: center;
2595 justify-content: center;
2596 gap: 6px;
2597 flex: 1;
2598 }
2599
2600 /* Terms Checklist (for WordPress Content Indexing) */
2601 .wpforo-ai-terms-container {
2602 background: #fff;
2603 border: 1px solid #c3c4c7;
2604 border-radius: 4px;
2605 max-height: 288px;
2606 overflow-y: auto;
2607 padding: 10px;
2608 margin-bottom: 10px;
2609 min-height: 100px;
2610 }
2611
2612 .wpforo-ai-terms-placeholder {
2613 color: #646970;
2614 font-style: italic;
2615 padding: 20px;
2616 text-align: center;
2617 }
2618
2619 .wpforo-ai-terms-loading {
2620 color: #646970;
2621 padding: 20px;
2622 text-align: center;
2623 display: flex;
2624 align-items: center;
2625 justify-content: center;
2626 gap: 8px;
2627 }
2628
2629 .wpforo-ai-terms-loading .spinner {
2630 margin: 0;
2631 float: none;
2632 }
2633
2634 .wpforo-ai-terms-checklist {
2635 margin: 0;
2636 padding: 0;
2637 }
2638
2639 .wpforo-ai-term-checkbox-item {
2640 display: block;
2641 padding: 6px 12px;
2642 margin: 0;
2643 cursor: pointer;
2644 border-radius: 3px;
2645 transition: background-color 0.15s ease;
2646 }
2647
2648 .wpforo-ai-term-checkbox-item:hover {
2649 background-color: #f6f7f7;
2650 }
2651
2652 .wpforo-ai-term-checkbox-item input[type="checkbox"] {
2653 margin: 0 8px 0 0;
2654 vertical-align: middle;
2655 }
2656
2657 .wpforo-ai-term-checkbox-item .term-name {
2658 vertical-align: middle;
2659 }
2660
2661 .wpforo-ai-term-child {
2662 padding-left: 32px;
2663 font-size: 13px;
2664 }
2665
2666 .wpforo-ai-term-info {
2667 color: #646970;
2668 font-size: 12px;
2669 margin-left: 4px;
2670 }
2671
2672 .wpforo-ai-terms-actions {
2673 display: flex;
2674 gap: 8px;
2675 margin-bottom: 15px;
2676 }
2677
2678 .wpforo-ai-terms-actions .button {
2679 display: inline-flex;
2680 align-items: center;
2681 justify-content: center;
2682 gap: 6px;
2683 flex: 1;
2684 }
2685
2686 /* Form Actions - Two Column Layout (Clear | Index) */
2687 .wpforo-ai-ingest-column .form-actions {
2688 margin-top: 20px;
2689 display: flex !important;
2690 flex-wrap: wrap;
2691 gap: 10px;
2692 justify-content: space-between !important;
2693 }
2694
2695 /* Clear Forum Button - Red Destructive Styling */
2696 .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn,
2697 .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn,
2698 button.button.wpforo-ai-clear-forum-btn {
2699 background: #fff !important;
2700 background-color: #fff !important;
2701 border-color: #d63638 !important;
2702 color: #d63638 !important;
2703 }
2704
2705 .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn:hover,
2706 .wpforo-ai-ingest-column .form-actions button.button.wpforo-ai-clear-forum-btn:focus,
2707 .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn:hover,
2708 .wpforo-ai-ingest-column .form-actions .button.wpforo-ai-clear-forum-btn:focus,
2709 button.button.wpforo-ai-clear-forum-btn:hover,
2710 button.button.wpforo-ai-clear-forum-btn:focus {
2711 background: #fcf0f1 !important;
2712 background-color: #fcf0f1 !important;
2713 border-color: #d63638 !important;
2714 color: #d63638 !important;
2715 }
2716
2717 .wpforo-ai-clear-forum-btn .dashicons {
2718 color: inherit !important;
2719 }
2720
2721 .wpforo-ai-ingest-column .form-row {
2722 margin-bottom: 20px;
2723 }
2724
2725 .wpforo-ai-ingest-column label {
2726 display: block;
2727 font-weight: 600;
2728 color: #1d2327;
2729 }
2730
2731 .wpforo-ai-ingest-column .regular-text {
2732 width: 100%;
2733 }
2734
2735 .wpforo-ai-no-forums {
2736 padding: 20px;
2737 background: #fff;
2738 border: 1px solid #c3c4c7;
2739 border-radius: 4px;
2740 text-align: center;
2741 color: #646970;
2742 font-style: italic;
2743 }
2744
2745 /* Button styling */
2746 .wpforo-ai-ingest-column .button-large {
2747 display: inline-flex;
2748 align-items: center;
2749 justify-content: center;
2750 gap: 6px;
2751 width: 100%;
2752 height: auto;
2753 padding: 10px 20px;
2754 font-size: 14px;
2755 }
2756
2757 .wpforo-ai-forum-ingest-form .form-actions .button-large{
2758 width: 49%;
2759 }
2760
2761 /* Responsive */
2762 @media screen and (max-width: 1200px) {
2763 .wpforo-ai-ingest-grid {
2764 grid-template-columns: 1fr;
2765 gap: 20px;
2766 }
2767 }
2768
2769 @media screen and (max-width: 782px) {
2770 .wpforo-ai-forum-checklist {
2771 max-height: 250px;
2772 }
2773
2774 .wpforo-ai-forum-checkbox-item {
2775 padding: 10px;
2776 }
2777
2778 .wpforo-ai-ingest-column {
2779 padding: 15px;
2780 }
2781 }
2782
2783 /* Forum Quick Actions (in Forum Content Indexing section) */
2784 .wpforo-ai-quick-actions {
2785 display: flex;
2786 gap: 15px;
2787 padding: 20px;
2788 background: #f8f9fa;
2789 border: 1px solid #dcdcde;
2790 border-radius: 4px;
2791 margin-top: 10px;
2792 justify-content: flex-end;
2793 }
2794
2795 .wpforo-ai-quick-actions .button {
2796 display: inline-flex;
2797 align-items: center;
2798 gap: 6px;
2799 }
2800
2801 .wpforo-ai-quick-actions .button-link-delete {
2802 color: #d63638;
2803 }
2804
2805 .wpforo-ai-quick-actions .button-link-delete:hover {
2806 color: #a02729;
2807 }
2808
2809 @media screen and (max-width: 782px) {
2810 .wpforo-ai-quick-actions {
2811 flex-direction: column;
2812 }
2813
2814 .wpforo-ai-quick-actions .button {
2815 width: 100%;
2816 justify-content: center;
2817 }
2818 }
2819
2820 /* ==========================================================================
2821 Index All Section (Full Width)
2822 ========================================================================== */
2823
2824 .wpforo-ai-index-all-section {
2825 padding: 25px;
2826 margin-bottom: 30px;
2827 color: #333;
2828 }
2829
2830 .wpforo-ai-index-all-content {
2831 display: grid;
2832 grid-template-columns: 1fr auto;
2833 gap: 25px;
2834 align-items: center;
2835 margin-bottom: 5px;
2836 }
2837
2838 .wpforo-ai-index-all-info h3 {
2839 margin: 0 0 8px 0;
2840 font-size: 20px;
2841 font-weight: 600;
2842 color: #333;
2843 display: flex;
2844 align-items: center;
2845 gap: 10px;
2846 }
2847
2848 /* Bonus Credits Button */
2849 .wp-core-ui .button.wpforo-ai-bonus-credits-btn {
2850 display: inline-flex;
2851 align-items: center;
2852 justify-content: center;
2853 gap: 4px;
2854 padding: 5px 12px;
2855 height: auto;
2856 line-height: 1.4;
2857 }
2858
2859 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible {
2860 border: 1px solid #3c8039;
2861 color: #2e6b2c;
2862 background: #e6f4e6;
2863 }
2864
2865 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible:hover {
2866 background: #d4ecd4;
2867 border-color: #2e6b2c;
2868 }
2869
2870 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible:focus {
2871 box-shadow: 0 0 0 1px #2e6b2c;
2872 }
2873
2874 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.claimed {
2875 border: 1px solid #9bc49a;
2876 color: #5a8f59;
2877 background: #f0f8f0;
2878 cursor: default;
2879 }
2880
2881 .wp-core-ui .button.wpforo-ai-bonus-credits-btn .dashicons {
2882 font-size: 16px;
2883 width: 16px;
2884 height: 16px;
2885 }
2886
2887 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.eligible .dashicons {
2888 color: #e6a800;
2889 }
2890
2891 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.claimed .dashicons {
2892 color: #5a8f59;
2893 }
2894
2895 /* Bonus Credits Spinner */
2896 .wpforo-ai-bonus-spinner {
2897 visibility: hidden;
2898 }
2899
2900 .wpforo-ai-bonus-spinner.is-active {
2901 visibility: visible;
2902 }
2903
2904 /* Hide button text and show spinner during loading */
2905 .wp-core-ui .button.wpforo-ai-bonus-credits-btn.loading {
2906 pointer-events: none;
2907 opacity: 0.7;
2908 }
2909
2910 .wp-core-ui .button-secondary.wpforo-ai-disconnect-btn{
2911 margin: 0 0 0 auto;
2912 border: #ca9696 1px solid;
2913 color: #b35b5b;
2914 background: #fff0ea;
2915 display: flex;
2916 align-items: center;
2917 justify-content: center;
2918 gap: 4px;
2919 }
2920 .wp-core-ui .button-secondary.wpforo-ai-disconnect-btn:hover{
2921 background: #ffd9cc;
2922 }
2923
2924 .wpforo-ai-index-all-info h3 .dashicons {
2925 font-size: 24px;
2926 width: 24px;
2927 height: 24px;
2928 }
2929
2930 .wpforo-ai-index-all-info .description {
2931 margin: 0;
2932 color: #666;
2933 font-size: 14px;
2934 }
2935
2936 /* Indexing Status Breakdown */
2937 .wpforo-ai-indexing-breakdown {
2938 width: 47%;
2939 margin: 30px 0 0 auto;
2940 }
2941
2942 .wpforo-ai-breakdown-details {
2943 background: #f8f9fa;
2944 border: 1px solid #e2e8f0;
2945 border-radius: 6px;
2946 overflow: hidden;
2947 }
2948
2949 .wpforo-ai-breakdown-summary {
2950 display: flex;
2951 align-items: center;
2952 gap: 8px;
2953 padding: 12px 15px;
2954 cursor: pointer;
2955 color: #64748b;
2956 font-size: 13px;
2957 background: transparent;
2958 transition: background 0.2s ease;
2959 }
2960
2961 .wpforo-ai-breakdown-summary:hover {
2962 background: #f1f5f9;
2963 }
2964
2965 .wpforo-ai-breakdown-summary .dashicons {
2966 font-size: 18px;
2967 width: 18px;
2968 height: 18px;
2969 }
2970
2971 .wpforo-ai-breakdown-arrow {
2972 margin-left: auto;
2973 transition: transform 0.2s ease;
2974 }
2975
2976 .wpforo-ai-breakdown-details[open] .wpforo-ai-breakdown-arrow {
2977 transform: rotate(180deg);
2978 }
2979
2980 .wpforo-ai-breakdown-content {
2981 padding: 15px;
2982 border-top: 1px solid #e2e8f0;
2983 background: #fff;
2984 }
2985
2986 .wpforo-ai-breakdown-intro {
2987 margin: 0 0 12px 0;
2988 color: #64748b;
2989 font-size: 13px;
2990 }
2991
2992 .wpforo-ai-breakdown-list {
2993 margin: 0;
2994 padding: 0;
2995 list-style: none;
2996 }
2997
2998 .wpforo-ai-breakdown-list li {
2999 display: flex;
3000 align-items: flex-start;
3001 gap: 8px;
3002 padding: 8px 0;
3003 color: #475569;
3004 font-size: 13px;
3005 border-bottom: 1px solid #f1f5f9;
3006 }
3007
3008 .wpforo-ai-breakdown-list li:last-child {
3009 border-bottom: none;
3010 }
3011
3012 .wpforo-ai-breakdown-list li .dashicons {
3013 font-size: 16px;
3014 width: 16px;
3015 height: 16px;
3016 color: #94a3b8;
3017 flex-shrink: 0;
3018 margin-top: 2px;
3019 }
3020
3021 .wpforo-ai-breakdown-list li .dashicons-lock {
3022 color: #f59e0b;
3023 }
3024
3025 .wpforo-ai-breakdown-list li .dashicons-clock {
3026 color: #3b82f6;
3027 }
3028
3029 .wpforo-ai-breakdown-list li strong {
3030 color: #334155;
3031 font-weight: 600;
3032 }
3033
3034 .wpforo-ai-breakdown-note {
3035 margin: 15px 0 0 0;
3036 padding: 10px;
3037 background: #fffbeb;
3038 border-radius: 4px;
3039 color: #92400e;
3040 font-size: 12px;
3041 }
3042
3043 .wpforo-ai-breakdown-note em {
3044 font-style: normal;
3045 }
3046
3047 .wpforo-ai-breakdown-loading {
3048 display: inline-flex;
3049 align-items: center;
3050 gap: 6px;
3051 padding: 8px 12px;
3052 background: #f8f9fa;
3053 border: 1px solid #e2e8f0;
3054 border-radius: 6px;
3055 color: #64748b;
3056 font-size: 13px;
3057 }
3058
3059 .wpforo-ai-breakdown-loading .dashicons {
3060 font-size: 16px;
3061 width: 16px;
3062 height: 16px;
3063 }
3064
3065 .wpforo-ai-index-all-stats {
3066 display: flex;
3067 gap: 20px;
3068 background: #0073aa;
3069 padding: 15px 20px;
3070 border-radius: 6px;
3071 color: #fff;
3072 }
3073
3074 .wpforo-ai-index-all-stats .stat-item {
3075 text-align: center;
3076 min-width: 100px;
3077 }
3078
3079 .wpforo-ai-index-all-stats .stat-label {
3080 display: block;
3081 font-size: 12px;
3082 color: rgba(255, 255, 255, 0.9);
3083 margin-bottom: 5px;
3084 text-transform: uppercase;
3085 letter-spacing: 0.5px;
3086 }
3087
3088 .wpforo-ai-index-all-stats .stat-value {
3089 display: block;
3090 font-size: 24px;
3091 font-weight: 700;
3092 color: #fff;
3093 }
3094
3095 .wpforo-ai-index-all-stats .stat-success {
3096 color: #4ade80;
3097 }
3098
3099 .wpforo-ai-index-all-stats .stat-warning {
3100 color: #fbbf24;
3101 }
3102
3103 .wpforo-ai-index-all-stats .stat-credits-needed {
3104 color: #a78bfa;
3105 }
3106
3107 /* Credit Notices */
3108 .wpforo-ai-credit-notice {
3109 display: flex;
3110 align-items: flex-start;
3111 gap: 12px;
3112 padding: 15px;
3113 border-radius: 6px;
3114 margin-bottom: 20px;
3115 background: #fff;
3116 border: 1px solid #dcdcde;
3117 }
3118
3119 .wpforo-ai-credit-notice .dashicons {
3120 flex-shrink: 0;
3121 font-size: 20px;
3122 width: 20px;
3123 height: 20px;
3124 margin-top: 2px;
3125 }
3126
3127 .wpforo-ai-credit-notice p {
3128 margin: 0;
3129 font-size: 14px;
3130 line-height: 1.6;
3131 }
3132
3133 .wpforo-ai-notice-info {
3134 border-left: 4px solid #3b82f6;
3135 }
3136
3137 .wpforo-ai-notice-warning {
3138 border-left: 4px solid #fbbf24;
3139 }
3140
3141 .wpforo-ai-notice-error {
3142 border-left: 4px solid #f87171;
3143 }
3144
3145 .wpforo-ai-notice-success {
3146 border-left: 4px solid #4ade80;
3147 }
3148
3149 /* Index All Action Button */
3150 .wpforo-ai-index-all-action {
3151 text-align: right;
3152 }
3153
3154 .wpforo-ai-index-all-action .button-hero {
3155 display: inline-flex;
3156 align-items: center;
3157 gap: 8px;
3158 background: #0073aa;
3159 color: #fff;
3160 border: none;
3161 font-size: 16px;
3162 font-weight: 600;
3163 padding: 12px 30px;
3164 height: auto;
3165 line-height: 1.4;
3166 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
3167 transition: all 0.3s ease;
3168 }
3169
3170 .wpforo-ai-index-all-action .button-hero:hover:not(:disabled) {
3171 background: #005177;
3172 transform: translateY(-2px);
3173 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);
3174 }
3175
3176 .wpforo-ai-index-all-action .button-hero:disabled {
3177 background: #ccc;
3178 color: #666;
3179 cursor: not-allowed;
3180 box-shadow: none;
3181 }
3182
3183 .wpforo-ai-index-all-action .button-hero .dashicons {
3184 font-size: 20px;
3185 width: 20px;
3186 height: 20px;
3187 }
3188
3189 /* Section Divider */
3190 .wpforo-ai-section-divider {
3191 position: relative;
3192 text-align: center;
3193 margin: 30px 0;
3194 }
3195
3196 .wpforo-ai-section-divider::before {
3197 content: '';
3198 position: absolute;
3199 top: 50%;
3200 left: 0;
3201 right: 0;
3202 height: 1px;
3203 background: linear-gradient(to right, transparent, #dcdcde 20%, #dcdcde 80%, transparent);
3204 }
3205
3206 .wpforo-ai-section-divider span {
3207 position: relative;
3208 display: inline-block;
3209 background: #fff;
3210 padding: 0 20px;
3211 color: #646970;
3212 font-weight: 600;
3213 font-size: 13px;
3214 text-transform: uppercase;
3215 letter-spacing: 0.5px;
3216 }
3217
3218 /* Small Section Divider (for inline separators) */
3219 .wpforo-ai-section-divider-small {
3220 margin: 20px 0 15px;
3221 }
3222
3223 .wpforo-ai-section-divider-small span {
3224 font-size: 12px;
3225 text-transform: none;
3226 font-weight: 500;
3227 }
3228
3229 /* ==========================================================================
3230 Credit Packs Section
3231 ========================================================================== */
3232
3233 .wpforo-ai-credit-packs-wrapper {
3234 padding: 10px 20px;
3235 background: #fff;
3236 }
3237
3238 .credit-packs-header {
3239 margin-bottom: 25px;
3240 text-align: center;
3241 }
3242
3243 .credit-packs-header h3 {
3244 font-size: 22px;
3245 font-weight: 600;
3246 color: #1d2327;
3247 margin: 0 0 10px 0;
3248 }
3249
3250 .credit-packs-description {
3251 color: #646970;
3252 font-size: 15px;
3253 line-height: 1.6;
3254 max-width: 700px;
3255 margin: 0 auto;
3256 }
3257
3258 .wpforo-ai-credit-packs-table {
3259 display: grid;
3260 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
3261 gap: 20px;
3262 margin-top: 20px;
3263 }
3264
3265 .credit-pack {
3266 position: relative;
3267 background: #f8f9fa;
3268 border: 2px solid #e1e4e8;
3269 border-radius: 8px;
3270 padding: 20px;
3271 transition: all 0.3s ease;
3272 display: flex;
3273 flex-direction: column;
3274 }
3275
3276 .credit-pack:hover {
3277 transform: translateY(-4px);
3278 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
3279 border-color: #2271b1;
3280 }
3281
3282 .credit-pack-popular {
3283 border-color: #2271b1;
3284 background: linear-gradient(135deg, #f8f9ff 0%, #f8f9fa 100%);
3285 }
3286
3287 .credit-pack-badge {
3288 position: absolute;
3289 top: -12px;
3290 right: 20px;
3291 background: #2271b1;
3292 color: #fff;
3293 font-size: 11px;
3294 font-weight: 600;
3295 text-transform: uppercase;
3296 padding: 4px 12px;
3297 border-radius: 12px;
3298 letter-spacing: 0.5px;
3299 box-shadow: 0 2px 4px rgba(34, 113, 177, 0.3);
3300 }
3301
3302 .credit-pack-header {
3303 text-align: center;
3304 margin-bottom: 15px;
3305 }
3306
3307 .credit-pack-header h4 {
3308 font-size: 18px;
3309 font-weight: 600;
3310 color: #1d2327;
3311 margin: 0 0 10px 0;
3312 }
3313
3314 .credit-pack-price {
3315 font-size: 32px;
3316 font-weight: 700;
3317 color: #2271b1;
3318 line-height: 1;
3319 }
3320
3321 .credit-pack-period {
3322 display: block;
3323 font-size: 12px;
3324 font-weight: 400;
3325 color: #646970;
3326 text-transform: uppercase;
3327 letter-spacing: 0.5px;
3328 margin-top: 5px;
3329 }
3330
3331 .credit-pack-features {
3332 flex: 1;
3333 margin-bottom: 20px;
3334 }
3335
3336 .credit-pack-features ul {
3337 list-style: none;
3338 margin: 0;
3339 padding: 0;
3340 }
3341
3342 .credit-pack-features li {
3343 display: flex;
3344 align-items: center;
3345 gap: 8px;
3346 padding: 8px 0;
3347 color: #3c434a;
3348 font-size: 13px;
3349 line-height: 1.4;
3350 }
3351
3352 .credit-pack-features li .dashicons {
3353 color: #4ade80;
3354 font-size: 18px;
3355 width: 18px;
3356 height: 18px;
3357 flex-shrink: 0;
3358 }
3359
3360 .credit-pack-action {
3361 text-align: center;
3362 }
3363
3364 .credit-pack-action .button {
3365 width: 100%;
3366 justify-content: center;
3367 font-weight: 600;
3368 padding: 10px 20px;
3369 height: auto;
3370 line-height: 1.4;
3371 }
3372
3373 .credit-pack-popular .credit-pack-action .button-primary {
3374 background: #2271b1;
3375 border-color: #2271b1;
3376 color: #fff;
3377 box-shadow: 0 2px 4px rgba(34, 113, 177, 0.3);
3378 }
3379
3380 .credit-pack-popular .credit-pack-action .button-primary:hover {
3381 background: #135e96;
3382 border-color: #135e96;
3383 box-shadow: 0 4px 8px rgba(34, 113, 177, 0.4);
3384 }
3385
3386 /* Responsive */
3387 @media screen and (max-width: 1200px) {
3388 .wpforo-ai-index-all-content {
3389 grid-template-columns: 1fr;
3390 gap: 20px;
3391 }
3392
3393 .wpforo-ai-index-all-stats {
3394 justify-content: center;
3395 }
3396
3397 .wpforo-ai-credit-packs-table {
3398 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
3399 }
3400 }
3401
3402 @media screen and (max-width: 900px) {
3403 .wpforo-ai-credit-packs-table {
3404 grid-template-columns: repeat(2, 1fr);
3405 }
3406 }
3407
3408 @media screen and (max-width: 782px) {
3409 .wpforo-ai-index-all-section {
3410 padding: 20px;
3411 }
3412
3413 .wpforo-ai-index-all-stats {
3414 flex-direction: column;
3415 gap: 15px;
3416 }
3417
3418 .wpforo-ai-index-all-stats .stat-item {
3419 min-width: auto;
3420 }
3421
3422 .wpforo-ai-index-all-action .button-hero {
3423 width: 100%;
3424 font-size: 15px;
3425 padding: 12px 20px;
3426 }
3427
3428 .wpforo-ai-credit-packs-section {
3429 padding: 20px;
3430 }
3431
3432 .wpforo-ai-credit-packs-table {
3433 grid-template-columns: 1fr;
3434 gap: 15px;
3435 }
3436
3437 .credit-pack {
3438 padding: 15px;
3439 }
3440 }
3441
3442 /* ==========================================================================
3443 Board Sub-Tabs (Multi-Board Support)
3444 ========================================================================== */
3445
3446 .wpforo-ai-board-tabs {
3447 display: flex;
3448 flex-wrap: wrap;
3449 justify-content: space-between;
3450 align-items: center;
3451 gap: 15px;
3452 margin-bottom: 25px;
3453 padding: 15px;
3454 background: #f8f9fa;
3455 border: 1px solid #e1e4e8;
3456 border-radius: 6px;
3457 }
3458
3459 .wpforo-ai-board-current {
3460 font-size: 14px;
3461 color: #50575e;
3462 }
3463
3464 .wpforo-ai-board-current strong {
3465 color: #1d2327;
3466 }
3467
3468 .wpforo-ai-board-tabs-list {
3469 display: flex;
3470 flex-wrap: wrap;
3471 gap: 8px;
3472 }
3473
3474 .wpforo-ai-board-tab {
3475 display: inline-flex;
3476 align-items: center;
3477 gap: 6px;
3478 padding: 10px 18px;
3479 background: #fff;
3480 border: 1px solid #ccd0d4;
3481 border-radius: 4px;
3482 color: #555;
3483 font-size: 14px;
3484 font-weight: 500;
3485 text-decoration: none;
3486 transition: all 0.2s ease;
3487 cursor: pointer;
3488 }
3489
3490 .wpforo-ai-board-tab:hover {
3491 background: #f0f0f1;
3492 color: #2271b1;
3493 border-color: #2271b1;
3494 }
3495
3496 .wpforo-ai-board-tab.active {
3497 background: #2271b1;
3498 border-color: #2271b1;
3499 color: #fff;
3500 font-weight: 600;
3501 box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2);
3502 }
3503
3504 .wpforo-ai-board-tab .dashicons {
3505 width: 18px;
3506 height: 18px;
3507 font-size: 18px;
3508 }
3509
3510 .wpforo-ai-board-tab.active .dashicons {
3511 color: #fff;
3512 }
3513
3514 /* Responsive */
3515 @media screen and (max-width: 782px) {
3516 .wpforo-ai-board-tabs {
3517 flex-direction: column;
3518 align-items: flex-start;
3519 gap: 10px;
3520 }
3521
3522 .wpforo-ai-board-tabs-list {
3523 width: 100%;
3524 flex-direction: column;
3525 gap: 5px;
3526 }
3527
3528 .wpforo-ai-board-tab {
3529 width: 100%;
3530 justify-content: center;
3531 }
3532 }
3533
3534 /* ==========================================================================
3535 Custom Indexing
3536 ========================================================================== */
3537
3538 .wpforo-ai-filtered-index {
3539 min-width: 360px;
3540 }
3541
3542 .wpforo-ai-filtered-index .form-row {
3543 margin-bottom: 15px;
3544 }
3545
3546 .wpforo-ai-filtered-index label {
3547 display: block;
3548 font-weight: 600;
3549 margin-bottom: 5px;
3550 color: #1d2327;
3551 }
3552
3553 .wpforo-ai-date-range {
3554 margin-bottom: 20px;
3555 }
3556
3557 .wpforo-ai-date-inputs {
3558 display: flex;
3559 align-items: center;
3560 gap: 10px;
3561 flex-wrap: wrap;
3562 }
3563
3564 .wpforo-ai-date-inputs input[type="date"] {
3565 width: 160px;
3566 padding: 6px 8px;
3567 }
3568
3569 .wpforo-ai-date-separator {
3570 color: #50575e;
3571 font-style: italic;
3572 }
3573
3574 .wpforo-ai-filter-divider {
3575 border: 0;
3576 border-top: 1px dashed #ccd0d4;
3577 margin: 20px 0;
3578 }
3579
3580 .wpforo-ai-filtered-index textarea {
3581 min-height: 80px;
3582 font-family: monospace;
3583 font-size: 13px;
3584 resize: vertical;
3585 }
3586
3587 .wpforo-ai-filtered-index .description {
3588 margin-top: 5px;
3589 color: #646970;
3590 font-size: 12px;
3591 font-style: italic;
3592 }
3593
3594 /* Responsive adjustments */
3595 @media screen and (max-width: 600px) {
3596 .wpforo-ai-date-inputs {
3597 flex-direction: column;
3598 align-items: flex-start;
3599 }
3600
3601 .wpforo-ai-date-inputs input[type="date"] {
3602 width: 100%;
3603 max-width: 200px;
3604 }
3605
3606 .wpforo-ai-date-separator {
3607 display: none;
3608 }
3609
3610 .wpforo-ai-filtered-index {
3611 min-width: unset;
3612 }
3613 }
3614
3615 /* ==========================================================================
3616 Forum Index Date Range
3617 ========================================================================== */
3618
3619 .wpforo-ai-forum-date-range {
3620 margin-bottom: 15px;
3621 padding-bottom: 10px;
3622 border-bottom: 1px dashed #dcdcde;
3623 }
3624
3625 .wpforo-ai-forum-date-range label {
3626 display: block;
3627 font-weight: 600;
3628 margin-bottom: 5px;
3629 color: #1d2327;
3630 font-size: 13px;
3631 }
3632
3633 /* ==========================================================================
3634 Tag Suggest Autocomplete
3635 ========================================================================== */
3636
3637 .wpforo-ai-tags-input {
3638 min-width: 300px;
3639 }
3640
3641 /* Tag suggest dropdown styling */
3642 .wpforo-ai-tag-results {
3643 padding: 0;
3644 margin: 0;
3645 list-style: none;
3646 position: absolute;
3647 z-index: 999999;
3648 background-color: #fff;
3649 border-radius: 4px;
3650 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
3651 max-height: 300px;
3652 overflow-y: auto;
3653 min-width: 300px;
3654 }
3655
3656 .wpforo-ai-tag-results li {
3657 margin: 0;
3658 padding: 12px 16px;
3659 font-size: 14px;
3660 line-height: 1.5;
3661 white-space: nowrap;
3662 text-align: left;
3663 cursor: pointer;
3664 color: #1d2327;
3665 background-color: #fff;
3666 border-bottom: 1px solid #f0f0f1;
3667 }
3668
3669 .wpforo-ai-tag-results li:last-child {
3670 border-bottom: none;
3671 }
3672
3673 .wpforo-ai-tag-results li:hover,
3674 .wpforo-ai-tag-results .wpforo-ai-tag-over {
3675 background-color: #2271b1;
3676 color: #fff;
3677 }
3678
3679 .wpforo-ai-tag-match {
3680 font-weight: 700;
3681 }
3682
3683 /* ==========================================================================
3684 AI Tasks Tab
3685 ========================================================================== */
3686
3687 /* Task Description Panel */
3688 .wpforo-ai-tasks-description {
3689 display: flex;
3690 justify-content: space-between;
3691 align-items: flex-start;
3692 gap: 20px;
3693 padding: 20px;
3694 background: #f8f9fa;
3695 border: 1px solid #e1e4e8;
3696 border-radius: 6px;
3697 margin-bottom: 20px;
3698 }
3699
3700 .wpforo-ai-tasks-description .description-content {
3701 flex: 1;
3702 }
3703
3704 .wpforo-ai-tasks-description .description-content h3 {
3705 margin: 0 0 10px 0;
3706 font-size: 18px;
3707 font-weight: 600;
3708 color: #1d2327;
3709 }
3710
3711 .wpforo-ai-tasks-description .description-content p {
3712 margin: 0 0 15px 0;
3713 color: #666;
3714 font-size: 14px;
3715 line-height: 1.6;
3716 }
3717
3718 .wpforo-ai-tasks-description .features-list {
3719 display: flex;
3720 flex-wrap: wrap;
3721 gap: 15px;
3722 margin: 0;
3723 padding: 0;
3724 list-style: none;
3725 }
3726
3727 .wpforo-ai-tasks-description .features-list li {
3728 display: flex;
3729 align-items: center;
3730 gap: 6px;
3731 font-size: 13px;
3732 color: #555;
3733 }
3734
3735 .wpforo-ai-tasks-description .features-list .dashicons {
3736 color: #2271b1;
3737 width: 16px;
3738 height: 16px;
3739 font-size: 16px;
3740 }
3741
3742 .wpforo-ai-tasks-description .description-action {
3743 flex-shrink: 0;
3744 }
3745
3746 /* Create Task Button */
3747 .wpforo-ai-create-task-btn {
3748 display: inline-flex;
3749 align-items: center;
3750 gap: 8px;
3751 padding: 12px 24px !important;
3752 font-size: 14px !important;
3753 font-weight: 600 !important;
3754 background: #2271b1 !important;
3755 border-color: #2271b1 !important;
3756 color: #fff !important;
3757 border-radius: 4px !important;
3758 transition: all 0.2s ease !important;
3759 height: auto !important;
3760 line-height: 1.4 !important;
3761 }
3762
3763 .wpforo-ai-create-task-btn:hover {
3764 background: #135e96 !important;
3765 border-color: #135e96 !important;
3766 }
3767
3768 .wpforo-ai-create-task-btn .dashicons {
3769 width: 20px;
3770 height: 20px;
3771 font-size: 20px;
3772 }
3773
3774 /* Task Creation Form Container */
3775 .wpforo-ai-task-form-container {
3776 display: none;
3777 margin-bottom: 25px;
3778 }
3779
3780 .wpforo-ai-task-form-container.visible {
3781 display: block !important;
3782 animation: slideDown 0.3s ease-out;
3783 }
3784
3785 @keyframes slideDown {
3786 from {
3787 opacity: 0;
3788 transform: translateY(-20px);
3789 }
3790 to {
3791 opacity: 1;
3792 transform: translateY(0);
3793 }
3794 }
3795
3796 /* Task Form Box */
3797 .wpforo-ai-task-form-box {
3798 background: #fff;
3799 border-bottom: 2px solid #2271b1;
3800 border-radius: 0;
3801 box-shadow: 0 4px 12px rgba(34, 113, 177, 0.15);
3802 }
3803
3804 .wpforo-ai-task-form-box .wpforo-ai-box-header {
3805 background: linear-gradient(135deg, #54a8ec 0%, #0964a8 100%);
3806 color: #fff;
3807 border-bottom: none;
3808 }
3809
3810 .wpforo-ai-task-form-box .wpforo-ai-box-header h2 {
3811 color: #fff;
3812 display: flex;
3813 align-items: center;
3814 gap: 10px;
3815 }
3816
3817 .wpforo-ai-task-form-box .wpforo-ai-box-header .dashicons {
3818 width: 24px;
3819 height: 24px;
3820 font-size: 22px;
3821 }
3822
3823 /* Task Form Sections */
3824 .wpforo-ai-task-form-section {
3825 padding: 20px;
3826 border-bottom: 1px solid #e1e4e8;
3827 }
3828
3829 .wpforo-ai-task-form-section:last-child {
3830 border-bottom: none;
3831 }
3832
3833 .wpforo-ai-task-form-section h3 {
3834 margin: 0 0 15px 0;
3835 font-size: 16px;
3836 font-weight: 600;
3837 color: #1d2327;
3838 padding-bottom: 10px;
3839 border-bottom: 1px dashed #e1e4e8;
3840 }
3841
3842 /* Form Rows */
3843 .wpforo-ai-form-row {
3844 display: flex;
3845 align-items: flex-start;
3846 gap: 20px;
3847 margin-bottom: 20px;
3848 }
3849
3850 .wpforo-ai-form-row:last-child {
3851 margin-bottom: 0;
3852 }
3853
3854 .wpforo-ai-form-row label .required {
3855 color: #d63638;
3856 margin-left: 2px;
3857 }
3858
3859 .wpforo-ai-form-control {
3860 flex: 1;
3861 }
3862
3863 .wpforo-ai-form-control input[type="text"],
3864 .wpforo-ai-form-control input[type="number"],
3865 .wpforo-ai-form-control input[type="time"],
3866 .wpforo-ai-form-control textarea,
3867 .wpforo-ai-form-control select {
3868 width: 100%;
3869 padding: 8px 12px;
3870 font-size: 14px;
3871 border: 1px solid #ccd0d4;
3872 border-radius: 4px;
3873 background: #fff;
3874 }
3875
3876 .wpforo-ai-form-control input:focus,
3877 .wpforo-ai-form-control textarea:focus,
3878 .wpforo-ai-form-control select:focus {
3879 border-color: #2271b1;
3880 outline: none;
3881 box-shadow: 0 0 0 1px #2271b1;
3882 }
3883
3884 .wpforo-ai-form-control .description {
3885 display: block;
3886 margin-top: 6px;
3887 font-size: 12px;
3888 color: #666;
3889 font-style: italic;
3890 }
3891
3892 /* Inline Form Controls */
3893 .wpforo-ai-inline-controls {
3894 display: flex;
3895 flex-wrap: wrap;
3896 gap: 15px;
3897 }
3898
3899 .wpforo-ai-inline-controls .inline-control {
3900 display: flex;
3901 align-items: center;
3902 gap: 8px;
3903 }
3904
3905 .wpforo-ai-inline-controls input[type="number"] {
3906 width: 80px !important;
3907 }
3908
3909 .wpforo-ai-inline-controls select {
3910 width: auto !important;
3911 }
3912
3913 /* Checkbox Row */
3914 .wpforo-ai-checkbox-row {
3915 display: flex;
3916 align-items: center;
3917 gap: 10px;
3918 margin-bottom: 10px;
3919 }
3920
3921 .wpforo-ai-checkbox-row label {
3922 flex: none;
3923 font-weight: normal;
3924 padding-top: 0;
3925 cursor: pointer;
3926 }
3927
3928 .wpforo-ai-checkbox-row input[type="checkbox"] {
3929 width: 18px;
3930 height: 18px;
3931 margin: 0;
3932 }
3933
3934 /* Dynamic Config Section */
3935 .wpforo-ai-dynamic-config {
3936 display: none;
3937 padding: 20px;
3938 background: #f9f9f9;
3939 border: 1px dashed #ccd0d4;
3940 border-radius: 4px;
3941 margin: 15px 0;
3942 }
3943
3944 .wpforo-ai-dynamic-config.visible {
3945 display: block;
3946 }
3947
3948 .wpforo-ai-dynamic-config h4 {
3949 margin: 0 0 15px 0;
3950 font-size: 15px;
3951 font-weight: 600;
3952 color: #1d2327;
3953 display: flex;
3954 align-items: center;
3955 gap: 8px;
3956 }
3957
3958 .wpforo-ai-dynamic-config h4 .dashicons {
3959 color: #2271b1;
3960 }
3961
3962 /* Config Subsections */
3963 .wpforo-ai-config-subsection {
3964 padding: 15px;
3965 margin-bottom: 15px;
3966 background: #fff;
3967 border: 1px solid #e1e4e8;
3968 border-radius: 4px;
3969 }
3970
3971 .wpforo-ai-config-subsection:last-child {
3972 margin-bottom: 0;
3973 }
3974
3975 .wpforo-ai-config-subsection h5 {
3976 margin: 0 0 12px 0;
3977 font-size: 14px;
3978 font-weight: 600;
3979 color: #555;
3980 text-transform: uppercase;
3981 letter-spacing: 0.5px;
3982 padding-bottom: 8px;
3983 border-bottom: 1px solid #f0f0f1;
3984 }
3985
3986 /* Forum Multi-Select */
3987 .wpforo-ai-forum-multiselect {
3988 max-height: 200px;
3989 overflow-y: auto;
3990 border: 1px solid #ccd0d4;
3991 border-radius: 4px;
3992 background: #fff;
3993 padding: 10px;
3994 }
3995
3996 .wpforo-ai-forum-multiselect label {
3997 display: block;
3998 padding: 6px 10px;
3999 margin: 0;
4000 cursor: pointer;
4001 border-radius: 3px;
4002 font-weight: normal;
4003 flex: none;
4004 }
4005
4006 .wpforo-ai-forum-multiselect label:hover {
4007 background: #f0f6fc;
4008 }
4009
4010 .wpforo-ai-forum-multiselect label input {
4011 margin-right: 8px;
4012 }
4013
4014 /* Day Checkboxes */
4015 .wpforo-ai-day-checkboxes {
4016 display: flex;
4017 flex-wrap: wrap;
4018 gap: 8px;
4019 }
4020
4021 .wpforo-ai-day-checkboxes label {
4022 display: inline-flex;
4023 align-items: center;
4024 gap: 4px;
4025 padding: 6px 12px;
4026 background: #f0f0f1;
4027 border: 1px solid #ccd0d4;
4028 border-radius: 4px;
4029 cursor: pointer;
4030 font-size: 13px;
4031 font-weight: normal;
4032 flex: none;
4033 transition: all 0.2s ease;
4034 }
4035
4036 .wpforo-ai-day-checkboxes label:hover {
4037 background: #e7f0f8;
4038 border-color: #2271b1;
4039 }
4040
4041 .wpforo-ai-day-checkboxes label.selected {
4042 background: #2271b1;
4043 border-color: #2271b1;
4044 color: #fff;
4045 }
4046
4047 .wpforo-ai-day-checkboxes input {
4048 display: none;
4049 }
4050
4051 /* Time Range */
4052 .wpforo-ai-time-range {
4053 display: flex;
4054 align-items: center;
4055 gap: 10px;
4056 }
4057
4058 .wpforo-ai-time-range input[type="time"] {
4059 width: 130px !important;
4060 }
4061
4062 .wpforo-ai-time-separator {
4063 color: #666;
4064 font-style: italic;
4065 }
4066
4067 /* Quality Tier Cards */
4068 .wpforo-ai-quality-tiers {
4069 display: grid;
4070 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
4071 gap: 12px;
4072 }
4073
4074 .wpforo-ai-quality-tier {
4075 position: relative;
4076 padding: 15px;
4077 background: #fff;
4078 border: 2px solid #e1e4e8;
4079 border-radius: 6px;
4080 cursor: pointer;
4081 transition: all 0.2s ease;
4082 }
4083
4084 .wpforo-ai-quality-tier:hover {
4085 border-color: #2271b1;
4086 box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15);
4087 }
4088
4089 .wpforo-ai-quality-tier.selected {
4090 border-color: #2271b1;
4091 background: #f0f6fc;
4092 }
4093
4094 .wpforo-ai-quality-tier input {
4095 position: absolute;
4096 opacity: 0;
4097 }
4098
4099 .wpforo-ai-quality-tier .tier-name {
4100 font-weight: 600;
4101 font-size: 14px;
4102 color: #1d2327;
4103 margin-bottom: 4px;
4104 }
4105
4106 .wpforo-ai-quality-tier .tier-credits {
4107 font-size: 12px;
4108 color: #666;
4109 }
4110
4111 .wpforo-ai-quality-tier .tier-credits strong {
4112 color: #2271b1;
4113 }
4114
4115 /* Form Actions */
4116 .wpforo-ai-form-actions {
4117 display: flex;
4118 justify-content: flex-end;
4119 gap: 10px;
4120 padding: 20px;
4121 background: #f9f9f9;
4122 border-top: 1px solid #e1e4e8;
4123 }
4124
4125 .wpforo-ai-form-actions .button {
4126 display: inline-flex;
4127 align-items: center;
4128 gap: 6px;
4129 padding: 8px 20px !important;
4130 font-size: 14px !important;
4131 height: auto !important;
4132 line-height: 1.4 !important;
4133 }
4134
4135 .wpforo-ai-form-actions .button .dashicons {
4136 width: 18px;
4137 height: 18px;
4138 font-size: 18px;
4139 }
4140
4141 /* ==========================================================================
4142 Task List Table
4143 ========================================================================== */
4144
4145 .wpforo-ai-tasks-list-container {
4146 margin-top: 25px;
4147 }
4148
4149 /* Table Actions Bar */
4150 .wpforo-ai-table-actions {
4151 display: flex;
4152 justify-content: space-between;
4153 align-items: center;
4154 gap: 15px;
4155 margin-bottom: 15px;
4156 padding: 12px 15px;
4157 background: #f8f9fa;
4158 border: 1px solid #e1e4e8;
4159 border-radius: 4px;
4160 }
4161
4162 .wpforo-ai-table-filters {
4163 display: flex;
4164 align-items: center;
4165 gap: 10px;
4166 }
4167
4168 .wpforo-ai-table-filters select {
4169 padding: 6px 12px;
4170 border: 1px solid #ccd0d4;
4171 border-radius: 4px;
4172 font-size: 13px;
4173 }
4174
4175 .wpforo-ai-table-search {
4176 display: flex;
4177 align-items: center;
4178 gap: 8px;
4179 }
4180
4181 .wpforo-ai-table-search input {
4182 padding: 6px 12px;
4183 border: 1px solid #ccd0d4;
4184 border-radius: 4px;
4185 font-size: 13px;
4186 width: 200px;
4187 }
4188
4189 /* Bulk Actions */
4190 .wpforo-ai-bulk-select {
4191 display: flex;
4192 align-items: center;
4193 gap: 10px;
4194 }
4195
4196 .wpforo-ai-bulk-select select {
4197 padding: 6px 12px;
4198 border: 1px solid #ccd0d4;
4199 border-radius: 4px;
4200 font-size: 13px;
4201 }
4202
4203 /* Tasks Table */
4204 .wpforo-ai-tasks-table {
4205 width: 100%;
4206 border-collapse: collapse;
4207 background: #fff;
4208 border: 1px solid #e1e4e8;
4209 border-radius: 4px;
4210 margin-top: 20px;
4211 }
4212
4213 .wpforo-ai-tasks-table thead th {
4214 padding: 12px 15px;
4215 background: #f8f9fa;
4216 border-bottom: 2px solid #e1e4e8;
4217 font-weight: 600;
4218 font-size: 13px;
4219 text-transform: uppercase;
4220 letter-spacing: 0.3px;
4221 color: #555;
4222 text-align: left;
4223 }
4224
4225 .wpforo-ai-tasks-table thead th.col-checkbox {
4226 width: 40px;
4227 text-align: center;
4228 }
4229
4230 .wpforo-ai-tasks-table thead th.col-status {
4231 width: 100px;
4232 }
4233
4234 .wpforo-ai-tasks-table thead th.col-actions {
4235 width: 180px;
4236 text-align: right;
4237 }
4238
4239 .wpforo-ai-tasks-table tbody td {
4240 padding: 7px 10px !important;
4241 border-bottom: 1px solid #f0f0f1;
4242 font-size: 14px;
4243 }
4244
4245 .wpforo-ai-tasks-table thead th {
4246 background-color: #f9f9f9;
4247 }
4248
4249 .wpforo-ai-tasks-table thead th:first-child{
4250 padding: 10px 10px 10px 2px;
4251 }
4252 .wpforo-ai-tasks-table thead th.column-name{
4253 padding-left: 10px;
4254 }
4255
4256 .wpforo-ai-tasks-table tbody tr:hover {
4257 background: #f8f9fa;
4258 }
4259
4260 .wpforo-ai-tasks-table tbody tr:last-child td {
4261 border-bottom: none;
4262 }
4263
4264 /* Task Name Cell */
4265 .wpforo-ai-task-name {
4266 font-weight: 600;
4267 color: #1d2327;
4268 }
4269
4270 .wpforo-ai-task-type {
4271 display: block;
4272 font-size: 12px;
4273 font-weight: normal;
4274 color: #666;
4275 margin-top: 3px;
4276 }
4277
4278 /* Next Run / Last Run Column */
4279 .wpforo-ai-next-run {
4280 font-size: 13px;
4281 font-weight: 500;
4282 color: #1d2327;
4283 }
4284
4285 .wpforo-ai-last-run {
4286 font-size: 11px;
4287 color: #666;
4288 }
4289
4290 .column-run-times.last-run-success .wpforo-ai-last-run {
4291 color: #00a32a;
4292 }
4293
4294 .column-run-times.last-run-failure .wpforo-ai-last-run {
4295 color: #d63638;
4296 }
4297
4298 .column-run-times.next-run-overdue .wpforo-ai-next-run {
4299 color: #dba617;
4300 font-weight: 600;
4301 }
4302
4303 /* Task Type Badge */
4304 .wpforo-ai-task-type-badge {
4305 display: inline-flex;
4306 align-items: center;
4307 gap: 6px;
4308 padding: 4px 10px;
4309 background: #f0f0f1;
4310 border-radius: 4px;
4311 font-size: 12px;
4312 font-weight: 500;
4313 color: #50575e;
4314 }
4315
4316 .wpforo-ai-task-type-badge svg {
4317 flex-shrink: 0;
4318 opacity: 0.8;
4319 }
4320
4321 /* Task Stats in Table */
4322 .wpforo-ai-task-stat {
4323 display: inline-flex;
4324 align-items: center;
4325 gap: 4px;
4326 margin-right: 12px;
4327 font-size: 12px;
4328 color: #50575e;
4329 }
4330
4331 .wpforo-ai-task-stat:last-child {
4332 margin-right: 0;
4333 }
4334
4335 .wpforo-ai-task-stat svg {
4336 flex-shrink: 0;
4337 opacity: 0.7;
4338 }
4339
4340 /* Task Status Badges */
4341 .wpforo-ai-task-status {
4342 display: inline-flex;
4343 align-items: center;
4344 gap: 5px;
4345 padding: 4px 10px;
4346 border-radius: 4px;
4347 font-size: 12px;
4348 font-weight: 600;
4349 }
4350
4351 .wpforo-ai-task-status.status-active {
4352 background: #d4edda;
4353 color: #155724;
4354 }
4355
4356 .wpforo-ai-task-status.status-paused {
4357 background: #fff3cd;
4358 color: #856404;
4359 }
4360
4361 .wpforo-ai-task-status.status-draft {
4362 background: #e1e4e8;
4363 color: #555;
4364 }
4365
4366 .wpforo-ai-task-status.status-error {
4367 background: #f8d7da;
4368 color: #721c24;
4369 }
4370
4371 .wpforo-ai-task-status.status-running {
4372 background: #cce5ff;
4373 color: #004085;
4374 }
4375
4376 .wpforo-ai-task-status.status-success {
4377 background: #d4edda;
4378 color: #155724;
4379 }
4380
4381 .wpforo-ai-task-status .dashicons {
4382 width: 14px;
4383 height: 14px;
4384 font-size: 14px;
4385 }
4386
4387 /* Spinning animation for task running indicator */
4388 .wpforo-ai-spin {
4389 animation: wpforo-ai-spin 1s linear infinite;
4390 display: inline-block;
4391 }
4392
4393 @keyframes wpforo-ai-spin {
4394 0% { transform: rotate(0deg); }
4395 100% { transform: rotate(-360deg); }
4396 }
4397
4398 /* Row highlight when task is running */
4399 .wpforo-ai-task-running {
4400 background-color: #f0f7ff !important;
4401 }
4402
4403 .wpforo-ai-task-running td {
4404 opacity: 0.8;
4405 }
4406
4407 .wpforo-ai-task-running .wpforo-ai-task-status {
4408 opacity: 1 !important;
4409 }
4410
4411 /* Task Statistics */
4412 .wpforo-ai-task-stats {
4413 font-size: 13px;
4414 color: #666;
4415 }
4416
4417 .wpforo-ai-task-stats .stat-item {
4418 display: block;
4419 margin-bottom: 3px;
4420 }
4421
4422 .wpforo-ai-task-stats .stat-item:last-child {
4423 margin-bottom: 0;
4424 }
4425
4426 .wpforo-ai-task-stats strong {
4427 color: #1d2327;
4428 }
4429
4430 /* Task Actions */
4431 .wpforo-ai-task-actions {
4432 display: flex;
4433 justify-content: flex-end;
4434 gap: 6px;
4435 }
4436
4437 .wpforo-ai-task-actions .button {
4438 display: inline-flex;
4439 align-items: center;
4440 justify-content: center;
4441 padding: 4px 8px !important;
4442 min-height: 28px;
4443 min-width: 28px;
4444 }
4445
4446 .wpforo-ai-task-actions .button .dashicons {
4447 width: 16px;
4448 height: 16px;
4449 font-size: 16px;
4450 margin: 0;
4451 }
4452
4453 .wpforo-ai-task-actions .button.button-run {
4454 color: #28a745;
4455 border-color: #28a745;
4456 }
4457
4458 .wpforo-ai-task-actions .button.button-run:hover {
4459 background: #28a745;
4460 color: #fff;
4461 }
4462
4463 .wpforo-ai-task-actions .button.button-pause {
4464 color: #ffc107;
4465 border-color: #ffc107;
4466 }
4467
4468 .wpforo-ai-task-actions .button.button-pause:hover {
4469 background: #ffc107;
4470 color: #000;
4471 }
4472
4473 .wpforo-ai-task-actions .button.button-delete {
4474 color: #dc3545;
4475 border-color: #dc3545;
4476 }
4477
4478 .wpforo-ai-task-actions .button.button-delete:hover {
4479 background: #dc3545;
4480 color: #fff;
4481 }
4482
4483 /* Task Actions Dropdown */
4484 .wpforo-ai-task-actions-dropdown {
4485 position: relative;
4486 display: inline-block;
4487 }
4488
4489 .wpforo-ai-task-actions-toggle {
4490 display: inline-flex;
4491 align-items: center;
4492 justify-content: center;
4493 padding: 4px;
4494 min-height: 28px;
4495 min-width: 28px;
4496 background: transparent;
4497 border: none;
4498 border-radius: 4px;
4499 cursor: pointer;
4500 transition: all 0.2s ease;
4501 color: #646970;
4502 }
4503
4504 .wpforo-ai-task-actions-toggle:hover {
4505 background: rgba(0, 0, 0, 0.05);
4506 color: #2271b1;
4507 }
4508
4509 .wpforo-ai-task-actions-toggle:focus {
4510 outline: none;
4511 box-shadow: none;
4512 }
4513
4514 .wpforo-ai-task-actions-toggle svg {
4515 display: block;
4516 color: #2271b1;
4517 }
4518
4519 .wpforo-ai-task-actions-menu {
4520 display: none;
4521 position: absolute;
4522 top: 100%;
4523 right: 0;
4524 z-index: 1000;
4525 min-width: 180px;
4526 margin-top: 4px;
4527 padding: 6px 0;
4528 background: #fff;
4529 border: 1px solid #ccd0d4;
4530 border-radius: 4px;
4531 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
4532 }
4533
4534 .wpforo-ai-task-actions-dropdown.open .wpforo-ai-task-actions-menu {
4535 display: block;
4536 }
4537
4538 .wpforo-ai-task-actions-menu a {
4539 display: flex;
4540 align-items: center;
4541 gap: 8px;
4542 padding: 8px 14px;
4543 color: #1d2327;
4544 text-decoration: none;
4545 font-size: 13px;
4546 line-height: 1.4;
4547 transition: background 0.15s ease;
4548 }
4549
4550 .wpforo-ai-task-actions-menu a:hover {
4551 background: #f0f6fc;
4552 color: #2271b1;
4553 }
4554
4555 .wpforo-ai-task-actions-menu a .dashicons {
4556 width: 16px;
4557 height: 16px;
4558 font-size: 16px;
4559 color: #646970;
4560 }
4561
4562 .wpforo-ai-task-actions-menu a:hover .dashicons {
4563 color: #2271b1;
4564 }
4565
4566 /* Menu action colors */
4567 .wpforo-ai-task-actions-menu a.wpforo-ai-task-run .dashicons {
4568 color: #28a745;
4569 }
4570
4571 .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete {
4572 color: #dc3545;
4573 }
4574
4575 .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete .dashicons {
4576 color: #dc3545;
4577 }
4578
4579 .wpforo-ai-task-actions-menu a.wpforo-ai-task-delete:hover {
4580 background: #fef1f1;
4581 color: #dc3545;
4582 }
4583
4584 /* Divider in menu */
4585 .wpforo-ai-task-actions-menu hr {
4586 margin: 6px 0;
4587 border: none;
4588 border-top: 1px solid #e0e0e0;
4589 }
4590
4591 /* Table Pagination */
4592 .wpforo-ai-table-pagination {
4593 display: flex;
4594 justify-content: space-between;
4595 align-items: center;
4596 margin-top: 15px;
4597 padding: 12px 15px;
4598 background: #f8f9fa;
4599 border: 1px solid #e1e4e8;
4600 border-radius: 4px;
4601 }
4602
4603 .wpforo-ai-pagination-info {
4604 font-size: 13px;
4605 color: #666;
4606 }
4607
4608 .wpforo-ai-pagination-links {
4609 display: flex;
4610 gap: 5px;
4611 }
4612
4613 .wpforo-ai-pagination-links .page-numbers {
4614 display: inline-flex;
4615 align-items: center;
4616 justify-content: center;
4617 min-width: 32px;
4618 height: 32px;
4619 padding: 0 10px;
4620 background: #fff;
4621 border: 1px solid #ccd0d4;
4622 border-radius: 4px;
4623 font-size: 13px;
4624 color: #555;
4625 text-decoration: none;
4626 transition: all 0.2s ease;
4627 }
4628
4629 .wpforo-ai-pagination-links .page-numbers:hover {
4630 background: #f0f0f1;
4631 border-color: #2271b1;
4632 color: #2271b1;
4633 }
4634
4635 .wpforo-ai-pagination-links .page-numbers.current {
4636 background: #2271b1;
4637 border-color: #2271b1;
4638 color: #fff;
4639 font-weight: 600;
4640 }
4641
4642 /* Empty State */
4643 .wpforo-ai-tasks-empty {
4644 text-align: center;
4645 padding: 60px 20px;
4646 background: #f9f9f9;
4647 border: 2px dashed #e1e4e8;
4648 border-radius: 6px;
4649 }
4650
4651 .wpforo-ai-tasks-empty .dashicons {
4652 width: 48px;
4653 height: 48px;
4654 font-size: 48px;
4655 color: #ccc;
4656 margin-bottom: 15px;
4657 }
4658
4659 .wpforo-ai-tasks-empty h3 {
4660 margin: 0 0 10px 0;
4661 font-size: 18px;
4662 color: #666;
4663 }
4664
4665 .wpforo-ai-tasks-empty p {
4666 margin: 0;
4667 color: #999;
4668 font-size: 14px;
4669 }
4670
4671 /* ==========================================================================
4672 AI Tasks - Form Section Styles (Deep Selectors for WP Compatibility)
4673 ========================================================================== */
4674
4675 /* Form Section Container */
4676 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section,
4677 .wpforo-ai-tasks-tab .wpforo-ai-task-form .wpforo-ai-form-section {
4678 margin-bottom: 25px;
4679 padding: 20px;
4680 background: #fff;
4681 border: 1px solid #e1e4e8;
4682 border-radius: 6px;
4683 }
4684
4685 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section:last-child,
4686 .wpforo-ai-tasks-tab .wpforo-ai-task-form .wpforo-ai-form-section:last-child {
4687 margin-bottom: 0;
4688 }
4689
4690 /* Form Section Title */
4691 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-title,
4692 .wpforo-ai-tasks-tab .wpforo-ai-form-section-title {
4693 display: flex;
4694 align-items: center;
4695 gap: 10px;
4696 margin: 0 0 20px 0;
4697 padding: 0 0 12px 0;
4698 font-size: 16px;
4699 font-weight: 600;
4700 color: #1d2327;
4701 border-bottom: 1px solid #e1e4e8;
4702 }
4703
4704 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-title .dashicons,
4705 .wpforo-ai-tasks-tab .wpforo-ai-form-section-title .dashicons {
4706 width: 20px;
4707 height: 20px;
4708 font-size: 20px;
4709 color: #2271b1;
4710 }
4711
4712 /* Form Row */
4713 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-row,
4714 .wpforo-ai-tasks-tab .wpforo-ai-form-row {
4715 display: flex;
4716 flex-wrap: wrap;
4717 gap: 20px;
4718 margin-bottom: 20px;
4719 }
4720
4721 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-row:last-child,
4722 .wpforo-ai-tasks-tab .wpforo-ai-form-row:last-child {
4723 margin-bottom: 0;
4724 }
4725
4726 /* Form Field */
4727 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field,
4728 .wpforo-ai-tasks-tab .wpforo-ai-form-field {
4729 flex: 1 1 100%;
4730 min-width: 0;
4731 }
4732
4733 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-half,
4734 .wpforo-ai-tasks-tab .wpforo-ai-form-field-half {
4735 flex: 1 1 calc(50% - 10px);
4736 min-width: 200px;
4737 }
4738
4739 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-third,
4740 .wpforo-ai-tasks-tab .wpforo-ai-form-field-third {
4741 flex: 1 1 calc(33.333% - 14px);
4742 min-width: 180px;
4743 }
4744
4745 /* Two-Column Layout */
4746 .wpforo-ai-wrap .wpforo-ai-two-column-layout,
4747 .wpforo-ai-tasks-tab .wpforo-ai-two-column-layout {
4748 display: flex;
4749 gap: 30px;
4750 align-items: flex-start;
4751 }
4752
4753 .wpforo-ai-wrap .wpforo-ai-column,
4754 .wpforo-ai-tasks-tab .wpforo-ai-column {
4755 flex: 1;
4756 min-width: 0;
4757 }
4758
4759 .wpforo-ai-wrap .wpforo-ai-column-left,
4760 .wpforo-ai-tasks-tab .wpforo-ai-column-left {
4761 flex: 0 0 40%;
4762 max-width: 40%;
4763 }
4764
4765 .wpforo-ai-wrap .wpforo-ai-column-right,
4766 .wpforo-ai-tasks-tab .wpforo-ai-column-right {
4767 flex: 0 0 50%;
4768 max-width: 50%;
4769 }
4770
4771 .wpforo-ai-wrap .wpforo-ai-column .wpforo-ai-form-field,
4772 .wpforo-ai-tasks-tab .wpforo-ai-column .wpforo-ai-form-field {
4773 margin-bottom: 16px;
4774 }
4775
4776 .wpforo-ai-wrap .wpforo-ai-column .wpforo-ai-form-field:last-child,
4777 .wpforo-ai-tasks-tab .wpforo-ai-column .wpforo-ai-form-field:last-child {
4778 margin-bottom: 0;
4779 }
4780
4781 /* Make forum checklist taller in two-column layout */
4782 .wpforo-ai-wrap .wpforo-ai-column-left .wpforo-ai-forum-checklist,
4783 .wpforo-ai-tasks-tab .wpforo-ai-column-left .wpforo-ai-forum-checklist {
4784 max-height: 400px;
4785 min-height: 300px;
4786 }
4787
4788 /* User Search Autocomplete */
4789 .wpforo-ai-user-search-wrapper {
4790 position: relative;
4791 }
4792
4793 .wpforo-ai-user-search-wrapper .wpforo-ai-user-search {
4794 width: 100%;
4795 padding: 8px 12px;
4796 border: 1px solid #8c8f94;
4797 border-radius: 4px;
4798 font-size: 14px;
4799 }
4800
4801 .wpforo-ai-user-search-wrapper .wpforo-ai-user-search:focus {
4802 border-color: #2271b1;
4803 box-shadow: 0 0 0 1px #2271b1;
4804 outline: none;
4805 }
4806
4807 .wpforo-ai-user-search-results {
4808 position: absolute;
4809 top: 100%;
4810 left: 0;
4811 right: 0;
4812 z-index: 1000;
4813 background: #fff;
4814 border: 1px solid #c3c4c7;
4815 border-top: none;
4816 border-radius: 0 0 4px 4px;
4817 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
4818 max-height: 300px;
4819 overflow-y: auto;
4820 display: none;
4821 }
4822
4823 .wpforo-ai-user-search-list {
4824 margin: 0;
4825 padding: 0;
4826 list-style: none;
4827 }
4828
4829 .wpforo-ai-user-search-item {
4830 padding: 10px 12px;
4831 cursor: pointer;
4832 border-bottom: 1px solid #f0f0f1;
4833 font-size: 13px;
4834 }
4835
4836 .wpforo-ai-user-search-item:last-child {
4837 border-bottom: none;
4838 }
4839
4840 .wpforo-ai-user-search-item:hover {
4841 background: #f0f7fc;
4842 }
4843
4844 .wpforo-ai-user-search-loading,
4845 .wpforo-ai-user-search-empty,
4846 .wpforo-ai-user-search-error {
4847 padding: 12px;
4848 text-align: center;
4849 color: #646970;
4850 font-size: 13px;
4851 }
4852
4853 .wpforo-ai-user-search-error {
4854 color: #d63638;
4855 }
4856
4857 /* Author OR Separator */
4858 .wpforo-ai-author-or-separator {
4859 text-align: center;
4860 margin: 8px 0;
4861 position: relative;
4862 }
4863 .wpforo-ai-author-or-separator span {
4864 display: inline-block;
4865 padding: 0 12px;
4866 background: #fff;
4867 color: #8c8f94;
4868 font-size: 12px;
4869 font-weight: 600;
4870 position: relative;
4871 z-index: 1;
4872 }
4873 .wpforo-ai-author-or-separator::before {
4874 content: '';
4875 position: absolute;
4876 top: 50%;
4877 left: 0;
4878 right: 0;
4879 height: 1px;
4880 background: #dcdcde;
4881 }
4882
4883 /* Form Field Labels */
4884 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field > label,
4885 .wpforo-ai-tasks-tab .wpforo-ai-form-field > label {
4886 display: block;
4887 margin-bottom: 8px;
4888 font-weight: 600;
4889 font-size: 14px;
4890 color: #1d2327;
4891 }
4892
4893 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field label .required,
4894 .wpforo-ai-tasks-tab .wpforo-ai-form-field label .required {
4895 color: #d63638;
4896 margin-left: 2px;
4897 }
4898
4899 /* Form Field Inputs */
4900 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="text"],
4901 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="number"],
4902 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input[type="time"],
4903 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field textarea,
4904 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field select,
4905 .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="text"],
4906 .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="number"],
4907 .wpforo-ai-tasks-tab .wpforo-ai-form-field input[type="time"],
4908 .wpforo-ai-tasks-tab .wpforo-ai-form-field textarea,
4909 .wpforo-ai-tasks-tab .wpforo-ai-form-field select {
4910 display: block;
4911 width: 100%;
4912 max-width: 100%;
4913 padding: 8px 12px;
4914 font-size: 14px;
4915 line-height: 1.5;
4916 color: #1d2327;
4917 background: #fff;
4918 border: 1px solid #8c8f94;
4919 border-radius: 4px;
4920 box-sizing: border-box;
4921 }
4922
4923 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field input:focus,
4924 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field textarea:focus,
4925 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field select:focus,
4926 .wpforo-ai-tasks-tab .wpforo-ai-form-field input:focus,
4927 .wpforo-ai-tasks-tab .wpforo-ai-form-field textarea:focus,
4928 .wpforo-ai-tasks-tab .wpforo-ai-form-field select:focus {
4929 border-color: #2271b1;
4930 box-shadow: 0 0 0 1px #2271b1;
4931 outline: none;
4932 }
4933
4934 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field .description,
4935 .wpforo-ai-tasks-tab .wpforo-ai-form-field .description {
4936 display: block;
4937 margin-top: 6px;
4938 font-size: 12px;
4939 font-style: italic;
4940 color: #646970;
4941 }
4942
4943 /* Radio Group */
4944 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-group,
4945 .wpforo-ai-tasks-tab .wpforo-ai-radio-group {
4946 display: flex;
4947 flex-wrap: wrap;
4948 gap: 12px;
4949 }
4950
4951 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-group-vertical,
4952 .wpforo-ai-tasks-tab .wpforo-ai-radio-group-vertical {
4953 flex-direction: column;
4954 gap: 8px;
4955 }
4956
4957 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item,
4958 .wpforo-ai-tasks-tab .wpforo-ai-radio-item {
4959 display: flex;
4960 align-items: center;
4961 gap: 8px;
4962 padding: 8px 12px;
4963 background: #f9f9f9;
4964 border: 1px solid #e1e4e8;
4965 border-radius: 4px;
4966 cursor: pointer;
4967 transition: all 0.2s ease;
4968 font-weight: normal !important;
4969 margin: 0 !important;
4970 }
4971
4972 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item:hover,
4973 .wpforo-ai-tasks-tab .wpforo-ai-radio-item:hover {
4974 background: #f0f6fc;
4975 border-color: #2271b1;
4976 }
4977
4978 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-item input[type="radio"],
4979 .wpforo-ai-tasks-tab .wpforo-ai-radio-item input[type="radio"] {
4980 margin: 0;
4981 flex-shrink: 0;
4982 }
4983
4984 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-label,
4985 .wpforo-ai-tasks-tab .wpforo-ai-radio-label {
4986 display: flex;
4987 flex-direction: column;
4988 gap: 2px;
4989 font-size: 14px;
4990 color: #1d2327;
4991 }
4992
4993 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-radio-label strong,
4994 .wpforo-ai-tasks-tab .wpforo-ai-radio-label strong {
4995 font-weight: 600;
4996 }
4997
4998 /* Status Dot */
4999 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot,
5000 .wpforo-ai-tasks-tab .wpforo-ai-status-dot {
5001 display: inline-block;
5002 width: 8px;
5003 height: 8px;
5004 border-radius: 50%;
5005 margin-right: 4px;
5006 }
5007
5008 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot.status-active,
5009 .wpforo-ai-tasks-tab .wpforo-ai-status-dot.status-active {
5010 background: #00a32a;
5011 }
5012
5013 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-status-dot.status-paused,
5014 .wpforo-ai-tasks-tab .wpforo-ai-status-dot.status-paused {
5015 background: #dba617;
5016 }
5017
5018 /* Checkbox Group */
5019 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group,
5020 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group {
5021 display: flex;
5022 flex-wrap: wrap;
5023 gap: 12px;
5024 }
5025
5026 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group-vertical,
5027 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group-vertical {
5028 flex-direction: column;
5029 gap: 8px;
5030 }
5031
5032 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-group-inline,
5033 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-group-inline {
5034 display: flex;
5035 flex-wrap: wrap;
5036 gap: 8px;
5037 }
5038
5039 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item,
5040 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item {
5041 display: flex;
5042 align-items: center;
5043 gap: 8px;
5044 padding: 8px 12px;
5045 background: #f9f9f9;
5046 border: 1px solid #e1e4e8;
5047 border-radius: 4px;
5048 cursor: pointer;
5049 transition: all 0.2s ease;
5050 font-weight: normal !important;
5051 margin: 0 !important;
5052 }
5053
5054 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item:hover,
5055 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item:hover {
5056 background: #f0f6fc;
5057 border-color: #2271b1;
5058 }
5059
5060 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-checkbox-item input[type="checkbox"],
5061 .wpforo-ai-tasks-tab .wpforo-ai-checkbox-item input[type="checkbox"] {
5062 width: 18px;
5063 height: 18px;
5064 margin: 0;
5065 flex-shrink: 0;
5066 }
5067
5068 /* Forum Child Indent */
5069 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-forum-child,
5070 .wpforo-ai-tasks-tab .wpforo-ai-forum-child {
5071 margin-left: 7px;
5072 font-size: 13px;
5073 }
5074
5075 /* Quality Options */
5076 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options,
5077 .wpforo-ai-tasks-tab .wpforo-ai-quality-options {
5078 gap: 10px;
5079 }
5080
5081 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options .wpforo-ai-radio-item,
5082 .wpforo-ai-tasks-tab .wpforo-ai-quality-options .wpforo-ai-radio-item {
5083 padding: 12px 16px;
5084 border: 2px solid #e1e4e8;
5085 }
5086
5087 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-options .wpforo-ai-radio-item:has(input:checked),
5088 .wpforo-ai-tasks-tab .wpforo-ai-quality-options .wpforo-ai-radio-item:has(input:checked) {
5089 background: #f0f6fc;
5090 border-color: #2271b1;
5091 }
5092
5093 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-quality-info,
5094 .wpforo-ai-tasks-tab .wpforo-ai-quality-info {
5095 font-size: 12px;
5096 color: #646970;
5097 font-weight: normal;
5098 }
5099
5100 /* Range Slider */
5101 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider,
5102 .wpforo-ai-tasks-tab .wpforo-ai-range-slider {
5103 -webkit-appearance: none;
5104 appearance: none;
5105 width: 100%;
5106 max-width: 300px;
5107 height: 0px;
5108 background: #e1e4e8;
5109 border-radius: 0;
5110 outline: none;
5111 cursor: pointer;
5112 padding: 0;
5113 }
5114
5115 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-webkit-slider-thumb,
5116 .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-webkit-slider-thumb {
5117 -webkit-appearance: none;
5118 appearance: none;
5119 width: 20px;
5120 height: 20px;
5121 background: #2271b1;
5122 border-radius: 50%;
5123 cursor: pointer;
5124 transition: background 0.2s ease;
5125 }
5126
5127 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-webkit-slider-thumb:hover,
5128 .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-webkit-slider-thumb:hover {
5129 background: #135e96;
5130 }
5131
5132 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-slider::-moz-range-thumb,
5133 .wpforo-ai-tasks-tab .wpforo-ai-range-slider::-moz-range-thumb {
5134 width: 20px;
5135 height: 20px;
5136 background: #2271b1;
5137 border: none;
5138 border-radius: 50%;
5139 cursor: pointer;
5140 }
5141
5142 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-range-value,
5143 .wpforo-ai-tasks-tab .wpforo-ai-range-value {
5144 display: inline-block;
5145 margin-left: 12px;
5146 padding: 4px 10px;
5147 background: #2271b1;
5148 color: #fff;
5149 font-size: 12px;
5150 font-weight: 600;
5151 border-radius: 12px;
5152 min-width: 40px;
5153 text-align: center;
5154 }
5155
5156 /* Input Suffix */
5157 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-input-suffix,
5158 .wpforo-ai-tasks-tab .wpforo-ai-input-suffix {
5159 display: inline-block;
5160 margin-left: 8px;
5161 font-size: 13px;
5162 color: #646970;
5163 }
5164
5165 /* Collapsible Section */
5166 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-section-collapsible,
5167 .wpforo-ai-tasks-tab .wpforo-ai-form-section-collapsible {
5168 background: #f9f9f9;
5169 }
5170
5171 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle,
5172 .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle {
5173 cursor: pointer;
5174 user-select: none;
5175 margin-bottom: 0;
5176 padding-bottom: 0;
5177 border-bottom: none;
5178 }
5179
5180 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle:hover,
5181 .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle:hover {
5182 color: #2271b1;
5183 }
5184
5185 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-toggle-icon,
5186 .wpforo-ai-tasks-tab .wpforo-ai-toggle-icon {
5187 margin-left: auto;
5188 transition: transform 0.3s ease;
5189 }
5190
5191 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-toggle[aria-expanded="true"] .wpforo-ai-toggle-icon,
5192 .wpforo-ai-tasks-tab .wpforo-ai-collapsible-toggle[aria-expanded="true"] .wpforo-ai-toggle-icon {
5193 transform: rotate(180deg);
5194 }
5195
5196 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-collapsible-content,
5197 .wpforo-ai-tasks-tab .wpforo-ai-collapsible-content {
5198 padding-top: 20px;
5199 margin-top: 15px;
5200 border-top: 1px solid #e1e4e8;
5201 }
5202
5203 /* Estimated Credits Notice */
5204 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-notice,
5205 .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-notice {
5206 display: flex;
5207 align-items: center;
5208 gap: 10px;
5209 padding: 12px 16px;
5210 margin-top: 15px;
5211 background: #e7f5ff;
5212 border: 1px solid #c3ddf5;
5213 border-radius: 4px;
5214 font-size: 14px;
5215 color: #135e96;
5216 }
5217
5218 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-notice .dashicons,
5219 .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-notice .dashicons {
5220 color: #2271b1;
5221 }
5222
5223 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-estimated-credits-value,
5224 .wpforo-ai-tasks-tab .wpforo-ai-estimated-credits-value {
5225 color: #2271b1;
5226 }
5227
5228 /* Credit Saving Notice */
5229 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-notice,
5230 .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-notice {
5231 display: flex;
5232 align-items: flex-start;
5233 gap: 10px;
5234 padding: 12px 16px;
5235 margin-top: 10px;
5236 background: #e8f5e9;
5237 border: 1px solid #c8e6c9;
5238 border-radius: 4px;
5239 font-size: 13px;
5240 color: #2e7d32;
5241 line-height: 1.4;
5242 }
5243
5244 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-notice .dashicons,
5245 .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-notice .dashicons {
5246 color: #43a047;
5247 flex-shrink: 0;
5248 margin-top: 2px;
5249 }
5250
5251 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-credit-saving-text strong,
5252 .wpforo-ai-tasks-tab .wpforo-ai-credit-saving-text strong {
5253 color: #1b5e20;
5254 }
5255
5256 /* Duplicate Settings Toggle */
5257 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-duplicate-settings,
5258 .wpforo-ai-tasks-tab .wpforo-ai-duplicate-settings {
5259 margin-top: 15px;
5260 padding-top: 15px;
5261 border-top: 1px dashed #e1e4e8;
5262 }
5263
5264 /* ==========================================================================
5265 AI Tasks - Responsive
5266 ========================================================================== */
5267
5268 @media screen and (max-width: 1200px) {
5269 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-half,
5270 .wpforo-ai-tasks-tab .wpforo-ai-form-field-half,
5271 .wpforo-ai-wrap .wpforo-ai-task-form .wpforo-ai-form-field-third,
5272 .wpforo-ai-tasks-tab .wpforo-ai-form-field-third {
5273 flex: 1 1 100%;
5274 }
5275
5276 .wpforo-ai-quality-tiers {
5277 grid-template-columns: repeat(2, 1fr);
5278 }
5279
5280 /* Stack two-column layout on smaller screens */
5281 .wpforo-ai-wrap .wpforo-ai-two-column-layout,
5282 .wpforo-ai-tasks-tab .wpforo-ai-two-column-layout {
5283 flex-direction: column;
5284 gap: 20px;
5285 }
5286
5287 .wpforo-ai-wrap .wpforo-ai-column-left,
5288 .wpforo-ai-tasks-tab .wpforo-ai-column-left,
5289 .wpforo-ai-wrap .wpforo-ai-column-right,
5290 .wpforo-ai-tasks-tab .wpforo-ai-column-right {
5291 flex: 1 1 100%;
5292 max-width: 100%;
5293 }
5294
5295 .wpforo-ai-wrap .wpforo-ai-column-left .wpforo-ai-forum-checklist,
5296 .wpforo-ai-tasks-tab .wpforo-ai-column-left .wpforo-ai-forum-checklist {
5297 max-height: 250px;
5298 min-height: 150px;
5299 }
5300 }
5301
5302 @media screen and (max-width: 782px) {
5303 .wpforo-ai-tasks-description {
5304 flex-direction: column;
5305 }
5306
5307 .wpforo-ai-tasks-description .description-action {
5308 width: 100%;
5309 }
5310
5311 .wpforo-ai-create-task-btn {
5312 width: 100%;
5313 justify-content: center;
5314 }
5315
5316 .wpforo-ai-table-actions {
5317 flex-direction: column;
5318 align-items: flex-start;
5319 }
5320
5321 .wpforo-ai-table-filters,
5322 .wpforo-ai-table-search {
5323 width: 100%;
5324 }
5325
5326 .wpforo-ai-table-search input {
5327 flex: 1;
5328 width: auto;
5329 }
5330
5331 .wpforo-ai-tasks-table {
5332 display: block;
5333 overflow-x: auto;
5334 }
5335
5336 .wpforo-ai-quality-tiers {
5337 grid-template-columns: 1fr;
5338 }
5339
5340 .wpforo-ai-form-actions {
5341 flex-direction: column;
5342 }
5343
5344 .wpforo-ai-form-actions .button {
5345 width: 100%;
5346 justify-content: center;
5347 }
5348
5349 .wpforo-ai-table-pagination {
5350 flex-direction: column;
5351 gap: 10px;
5352 }
5353 }
5354
5355 /* ==========================================================================
5356 AI Tasks - Stats Modal
5357 ========================================================================== */
5358
5359 .wpforo-ai-stats-modal-overlay,
5360 .wpforo-ai-logs-modal-overlay {
5361 position: fixed;
5362 top: 0;
5363 left: 0;
5364 right: 0;
5365 bottom: 0;
5366 background: rgba(0, 0, 0, 0.6);
5367 display: flex;
5368 align-items: center;
5369 justify-content: center;
5370 z-index: 100000;
5371 }
5372
5373 .wpforo-ai-stats-modal,
5374 .wpforo-ai-logs-modal {
5375 background: #fff;
5376 border-radius: 8px;
5377 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
5378 max-width: 600px;
5379 width: 90%;
5380 max-height: 80vh;
5381 display: flex;
5382 flex-direction: column;
5383 }
5384
5385 .wpforo-ai-logs-modal {
5386 max-width: 900px;
5387 }
5388
5389 .wpforo-ai-stats-modal-header,
5390 .wpforo-ai-logs-modal-header {
5391 display: flex;
5392 align-items: center;
5393 justify-content: space-between;
5394 padding: 16px 20px;
5395 border-bottom: 1px solid #e1e4e8;
5396 background: #f8f9fa;
5397 border-radius: 8px 8px 0 0;
5398 }
5399
5400 .wpforo-ai-stats-modal-header h3,
5401 .wpforo-ai-logs-modal-header h3 {
5402 margin: 0;
5403 font-size: 16px;
5404 font-weight: 600;
5405 color: #1e293b;
5406 display: flex;
5407 align-items: center;
5408 gap: 8px;
5409 }
5410
5411 .wpforo-ai-stats-modal-header h3 .dashicons,
5412 .wpforo-ai-logs-modal-header h3 .dashicons {
5413 color: #3b82f6;
5414 }
5415
5416 .wpforo-ai-stats-modal-close,
5417 .wpforo-ai-logs-modal-close {
5418 background: none;
5419 border: none;
5420 font-size: 24px;
5421 color: #64748b;
5422 cursor: pointer;
5423 padding: 0;
5424 line-height: 1;
5425 transition: color 0.2s;
5426 }
5427
5428 .wpforo-ai-stats-modal-close:hover,
5429 .wpforo-ai-logs-modal-close:hover {
5430 color: #ef4444;
5431 }
5432
5433 .wpforo-ai-stats-modal-body,
5434 .wpforo-ai-logs-modal-body {
5435 padding: 20px;
5436 overflow-y: auto;
5437 }
5438
5439 /* Stats Grid */
5440 .wpforo-ai-stats-grid {
5441 display: grid;
5442 grid-template-columns: repeat(2, 1fr);
5443 gap: 16px;
5444 margin-bottom: 20px;
5445 }
5446
5447 .wpforo-ai-stat-card {
5448 background: #f8f9fa;
5449 border: 1px solid #e1e4e8;
5450 border-radius: 8px;
5451 padding: 16px;
5452 text-align: center;
5453 }
5454
5455 .wpforo-ai-stat-value {
5456 font-size: 28px;
5457 font-weight: 700;
5458 color: #3b82f6;
5459 line-height: 1.2;
5460 }
5461
5462 .wpforo-ai-stat-label {
5463 font-size: 13px;
5464 color: #64748b;
5465 margin-top: 4px;
5466 }
5467
5468 .wpforo-ai-stats-details {
5469 background: #f8f9fa;
5470 border: 1px solid #e1e4e8;
5471 border-radius: 8px;
5472 padding: 16px;
5473 }
5474
5475 .wpforo-ai-stats-details p {
5476 margin: 0 0 8px 0;
5477 font-size: 14px;
5478 color: #475569;
5479 }
5480
5481 .wpforo-ai-stats-details p:last-child {
5482 margin-bottom: 0;
5483 }
5484
5485 .wpforo-ai-stats-details strong {
5486 color: #1e293b;
5487 }
5488
5489 /* Logs Table */
5490 .wpforo-ai-logs-table {
5491 width: 100%;
5492 border-collapse: collapse;
5493 font-size: 13px;
5494 }
5495
5496 .wpforo-ai-logs-table th,
5497 .wpforo-ai-logs-table td {
5498 padding: 10px 12px;
5499 text-align: left;
5500 border-bottom: 1px solid #e1e4e8;
5501 }
5502
5503 .wpforo-ai-logs-table th {
5504 background: #f8f9fa;
5505 font-weight: 600;
5506 color: #1e293b;
5507 white-space: nowrap;
5508 }
5509
5510 .wpforo-ai-logs-table tr:hover td {
5511 background: #f8f9fa;
5512 }
5513
5514 .wpforo-ai-log-status {
5515 display: inline-block;
5516 padding: 2px 8px;
5517 border-radius: 12px;
5518 font-size: 11px;
5519 font-weight: 500;
5520 text-transform: capitalize;
5521 }
5522
5523 .wpforo-ai-log-status.status-success {
5524 background: #dcfce7;
5525 color: #166534;
5526 }
5527
5528 .wpforo-ai-log-status.status-error {
5529 background: #fee2e2;
5530 color: #991b1b;
5531 }
5532
5533 .wpforo-ai-log-status.status-warning {
5534 background: #fef3c7;
5535 color: #92400e;
5536 }
5537
5538 .wpforo-ai-logs-empty {
5539 text-align: center;
5540 padding: 40px 20px;
5541 color: #64748b;
5542 }
5543
5544 .wpforo-ai-logs-empty .dashicons {
5545 font-size: 48px;
5546 width: 48px;
5547 height: 48px;
5548 color: #cbd5e1;
5549 margin-bottom: 12px;
5550 }
5551
5552 .wpforo-ai-logs-empty p {
5553 margin: 0;
5554 font-size: 14px;
5555 }
5556
5557 /* Modal Responsive */
5558 @media screen and (max-width: 600px) {
5559 .wpforo-ai-stats-grid {
5560 grid-template-columns: 1fr;
5561 }
5562
5563 .wpforo-ai-logs-table {
5564 display: block;
5565 overflow-x: auto;
5566 }
5567 }
5568
5569 /* ==========================================================================
5570 Section Description
5571 ========================================================================== */
5572
5573 .wpforo-ai-section-description {
5574 margin: 0 0 15px 0;
5575 color: #646970;
5576 font-size: 13px;
5577 line-height: 1.5;
5578 }
5579
5580 /* ==========================================================================
5581 Date Range Picker (AI Tasks Tab)
5582 ========================================================================== */
5583
5584 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-range {
5585 display: flex;
5586 gap: 15px;
5587 align-items: flex-end;
5588 }
5589
5590 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field {
5591 flex: 1;
5592 }
5593
5594 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field label {
5595 display: block;
5596 font-size: 12px;
5597 color: #646970;
5598 margin-bottom: 4px;
5599 }
5600
5601 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field input[type="date"] {
5602 width: 100%;
5603 padding: 6px 10px;
5604 border: 1px solid #8c8f94;
5605 border-radius: 4px;
5606 font-size: 13px;
5607 }
5608
5609 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-field input[type="date"]:focus {
5610 border-color: #2271b1;
5611 box-shadow: 0 0 0 1px #2271b1;
5612 outline: none;
5613 }
5614
5615 /* ==========================================================================
5616 Info Box
5617 ========================================================================== */
5618
5619 .wpforo-ai-info-box {
5620 display: flex;
5621 gap: 10px;
5622 padding: 12px 15px;
5623 background: #f0f6fc;
5624 border: 1px solid #c3c4c7;
5625 border-left: 4px solid #2271b1;
5626 border-radius: 4px;
5627 margin-top: 15px;
5628 }
5629
5630 .wpforo-ai-info-box .dashicons {
5631 color: #2271b1;
5632 flex-shrink: 0;
5633 margin-top: 2px;
5634 }
5635
5636 .wpforo-ai-info-box strong {
5637 display: block;
5638 margin-bottom: 6px;
5639 font-size: 13px;
5640 }
5641
5642 .wpforo-ai-info-box ul {
5643 margin: 0;
5644 padding: 0 0 0 16px;
5645 font-size: 12px;
5646 color: #50575e;
5647 }
5648
5649 .wpforo-ai-info-box ul li {
5650 margin-bottom: 3px;
5651 }
5652
5653 .wpforo-ai-info-box ul li:last-child {
5654 margin-bottom: 0;
5655 }
5656
5657 /* Responsive date range */
5658 @media screen and (max-width: 600px) {
5659 .wpforo-ai-tasks-tab .wpforo-ai-tasks-date-range {
5660 flex-direction: column;
5661 gap: 10px;
5662 }
5663 }
5664
5665 /* ==========================================================================
5666 Textarea with Character Counter
5667 ========================================================================== */
5668
5669 .wpforo-ai-textarea-with-counter {
5670 position: relative;
5671 }
5672
5673 .wpforo-ai-textarea-with-counter textarea {
5674 padding-bottom: 24px;
5675 }
5676
5677 .wpforo-ai-char-counter {
5678 position: absolute;
5679 bottom: 6px;
5680 right: 10px;
5681 font-size: 11px;
5682 color: #666;
5683 background: rgba(255, 255, 255, 0.9);
5684 padding: 2px 6px;
5685 border-radius: 3px;
5686 pointer-events: none;
5687 }
5688
5689 .wpforo-ai-char-counter .current {
5690 font-weight: 600;
5691 }
5692
5693 .wpforo-ai-char-counter.warning {
5694 color: #dba617;
5695 }
5696
5697 .wpforo-ai-char-counter.limit {
5698 color: #d63638;
5699 }
5700
5701 /* ==========================================================================
5702 Auto-Indexing Toggle Switch
5703 ========================================================================== */
5704
5705 .wpforo-ai-header-actions {
5706 display: flex;
5707 align-items: center;
5708 gap: 15px;
5709 }
5710
5711 .wpforo-ai-auto-index-toggle {
5712 display: flex;
5713 align-items: center;
5714 gap: 8px;
5715 cursor: pointer;
5716 }
5717
5718 .wpforo-ai-auto-index-label {
5719 font-size: 13px;
5720 font-weight: 500;
5721 color: #50575e;
5722 }
5723
5724 /* iOS-style toggle switch */
5725 .wpforo-ai-switch {
5726 position: relative;
5727 display: inline-block;
5728 width: 40px;
5729 height: 22px;
5730 }
5731
5732 .wpforo-ai-switch input {
5733 opacity: 0;
5734 width: 0;
5735 height: 0;
5736 }
5737
5738 .wpforo-ai-switch-slider {
5739 position: absolute;
5740 cursor: pointer;
5741 top: 0;
5742 left: 0;
5743 right: 0;
5744 bottom: 0;
5745 background-color: #c3c4c7;
5746 transition: 0.3s;
5747 border-radius: 22px;
5748 }
5749
5750 .wpforo-ai-switch-slider:before {
5751 position: absolute;
5752 content: "";
5753 height: 16px;
5754 width: 16px;
5755 left: 3px;
5756 bottom: 3px;
5757 background-color: white;
5758 transition: 0.3s;
5759 border-radius: 50%;
5760 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
5761 }
5762
5763 .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider {
5764 background-color: #2271b1;
5765 }
5766
5767 .wpforo-ai-switch input:focus + .wpforo-ai-switch-slider {
5768 box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
5769 }
5770
5771 .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider:before {
5772 transform: translateX(18px);
5773 }
5774
5775 .wpforo-ai-switch input:disabled + .wpforo-ai-switch-slider {
5776 opacity: 0.6;
5777 cursor: not-allowed;
5778 }
5779
5780 .wpforo-ai-auto-index-toggle:hover .wpforo-ai-switch-slider {
5781 background-color: #a3a5a8;
5782 }
5783
5784 .wpforo-ai-auto-index-toggle:hover .wpforo-ai-switch input:checked + .wpforo-ai-switch-slider {
5785 background-color: #135e96;
5786 }
5787
5788 /* ==========================================================================
5789 Analytics Tab Styles
5790 ========================================================================== */
5791
5792 /* Analytics Sub-tabs */
5793 .wpforo-ai-analytics-subtabs-box {
5794 margin-bottom: 20px;
5795 }
5796
5797 .wpforo-ai-analytics-subtabs-box .wpforo-ai-box-body {
5798 padding: 0;
5799 }
5800
5801 .wpforo-ai-analytics-subtabs {
5802 display: flex;
5803 gap: 0;
5804 border-bottom: none;
5805 }
5806
5807 .wpforo-ai-analytics-subtab {
5808 padding: 12px 20px;
5809 text-decoration: none;
5810 color: #50575e;
5811 font-weight: 500;
5812 border-bottom: 3px solid transparent;
5813 transition: all 0.2s ease;
5814 display: flex;
5815 align-items: center;
5816 gap: 8px;
5817 }
5818
5819 .wpforo-ai-analytics-subtab:hover {
5820 color: #2271b1;
5821 background: #f0f6fc;
5822 }
5823
5824 .wpforo-ai-analytics-subtab.active {
5825 color: #2271b1;
5826 border-bottom-color: #2271b1;
5827 background: #f0f6fc;
5828 }
5829
5830 .wpforo-ai-analytics-subtab.disabled {
5831 color: #a7aaad;
5832 cursor: not-allowed;
5833 }
5834
5835 .wpforo-ai-analytics-subtab.disabled:hover {
5836 background: transparent;
5837 color: #a7aaad;
5838 }
5839
5840 .wpforo-ai-coming-soon {
5841 font-size: 10px;
5842 background: #dba617;
5843 color: #fff;
5844 padding: 2px 6px;
5845 border-radius: 3px;
5846 text-transform: uppercase;
5847 font-weight: 600;
5848 }
5849
5850 /* Time Range Selector */
5851 .wpforo-ai-time-range-box {
5852 margin-bottom: 20px;
5853 }
5854
5855 .wpforo-ai-time-range-selector {
5856 display: flex;
5857 flex-wrap: wrap;
5858 align-items: center;
5859 gap: 15px;
5860 }
5861
5862 .wpforo-ai-time-range-label {
5863 display: flex;
5864 align-items: center;
5865 gap: 8px;
5866 font-weight: 600;
5867 color: #1d2327;
5868 }
5869
5870 .wpforo-ai-time-range-label .dashicons {
5871 color: #2271b1;
5872 }
5873
5874 .wpforo-ai-time-range-buttons {
5875 display: flex;
5876 gap: 5px;
5877 flex-wrap: wrap;
5878 }
5879
5880 .wpforo-ai-time-range-btn {
5881 padding: 8px 16px;
5882 background: #f0f0f1;
5883 border: 1px solid #c3c4c7;
5884 border-radius: 4px;
5885 color: #50575e;
5886 text-decoration: none;
5887 font-size: 13px;
5888 cursor: pointer;
5889 transition: all 0.2s ease;
5890 }
5891
5892 .wpforo-ai-time-range-btn:hover {
5893 background: #e0e0e0;
5894 color: #1d2327;
5895 }
5896
5897 .wpforo-ai-time-range-btn.active {
5898 background: #2271b1;
5899 border-color: #2271b1;
5900 color: #fff;
5901 }
5902
5903 .wpforo-ai-custom-range-picker {
5904 display: flex;
5905 align-items: center;
5906 gap: 10px;
5907 margin-top: 10px;
5908 padding: 15px;
5909 background: #f9f9f9;
5910 border-radius: 4px;
5911 width: 100%;
5912 }
5913
5914 .wpforo-ai-custom-range-picker form {
5915 display: flex;
5916 align-items: center;
5917 gap: 15px;
5918 flex-wrap: wrap;
5919 }
5920
5921 .wpforo-ai-custom-range-picker label {
5922 display: flex;
5923 align-items: center;
5924 gap: 8px;
5925 font-weight: 500;
5926 }
5927
5928 .wpforo-ai-custom-range-picker input[type="date"] {
5929 padding: 6px 10px;
5930 border: 1px solid #c3c4c7;
5931 border-radius: 4px;
5932 }
5933
5934 .wpforo-ai-time-range-info {
5935 margin-left: auto;
5936 color: #646970;
5937 font-size: 13px;
5938 }
5939
5940 .wpforo-ai-date-range-display {
5941 background: #f0f6fc;
5942 padding: 6px 12px;
5943 border-radius: 4px;
5944 border: 1px solid #c3c4c7;
5945 }
5946
5947 /* Summary Cards */
5948 .wpforo-ai-analytics-summary-cards {
5949 display: grid;
5950 grid-template-columns: repeat(4, 1fr);
5951 gap: 20px;
5952 margin-bottom: 20px;
5953 }
5954
5955 @media (max-width: 1200px) {
5956 .wpforo-ai-analytics-summary-cards {
5957 grid-template-columns: repeat(2, 1fr);
5958 }
5959 }
5960
5961 @media (max-width: 600px) {
5962 .wpforo-ai-analytics-summary-cards {
5963 grid-template-columns: 1fr;
5964 }
5965 }
5966
5967 .wpforo-ai-analytics-card {
5968 background: #fff;
5969 border: 1px solid #ccd0d4;
5970 border-radius: 4px;
5971 padding: 20px;
5972 display: flex;
5973 align-items: center;
5974 gap: 15px;
5975 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
5976 }
5977
5978 .wpforo-ai-analytics-card-icon {
5979 width: 50px;
5980 height: 50px;
5981 background: #f0f6fc;
5982 border-radius: 50%;
5983 display: flex;
5984 align-items: center;
5985 justify-content: center;
5986 }
5987
5988 .wpforo-ai-analytics-card-icon .dashicons {
5989 font-size: 24px;
5990 width: 24px;
5991 height: 24px;
5992 color: #2271b1;
5993 }
5994
5995 .wpforo-ai-analytics-card-content {
5996 flex: 1;
5997 }
5998
5999 .wpforo-ai-analytics-card-value {
6000 font-size: 28px;
6001 font-weight: 700;
6002 color: #1d2327;
6003 line-height: 1.2;
6004 }
6005
6006 .wpforo-ai-analytics-card-label {
6007 font-size: 13px;
6008 color: #646970;
6009 margin-top: 4px;
6010 }
6011
6012 /* Charts */
6013 .wpforo-ai-analytics-charts-row {
6014 display: grid;
6015 grid-template-columns: repeat(2, 1fr);
6016 gap: 20px;
6017 margin-bottom: 20px;
6018 }
6019
6020 .wpforo-ai-chart-box.wpforo-ai-chart-wide {
6021 grid-column: span 2;
6022 }
6023
6024 @media (max-width: 1200px) {
6025 .wpforo-ai-analytics-charts-row {
6026 grid-template-columns: 1fr;
6027 }
6028
6029 .wpforo-ai-chart-box.wpforo-ai-chart-wide {
6030 grid-column: span 1;
6031 }
6032 }
6033
6034 .wpforo-ai-chart-box .wpforo-ai-box-header {
6035 padding: 12px 20px;
6036 }
6037
6038 .wpforo-ai-chart-box .wpforo-ai-box-header h3 {
6039 margin: 0;
6040 font-size: 14px;
6041 font-weight: 600;
6042 display: flex;
6043 align-items: center;
6044 gap: 8px;
6045 }
6046
6047 .wpforo-ai-chart-box .wpforo-ai-box-header h3 .dashicons {
6048 color: #2271b1;
6049 }
6050
6051 .wpforo-ai-chart-container {
6052 position: relative;
6053 height: 300px;
6054 width: 100%;
6055 }
6056
6057 .wpforo-ai-chart-pie-container {
6058 height: 280px;
6059 max-width: 98%;
6060 margin: 0 auto;
6061 }
6062
6063 .wpforo-ai-chart-loading {
6064 position: absolute;
6065 top: 0;
6066 left: 0;
6067 right: 0;
6068 bottom: 0;
6069 background: rgba(255, 255, 255, 0.9);
6070 display: flex;
6071 align-items: center;
6072 justify-content: center;
6073 gap: 10px;
6074 color: #646970;
6075 font-size: 13px;
6076 }
6077
6078 /* Main Analytics Loading Overlay */
6079 .wpforo-ai-analytics-main-loading {
6080 display: flex;
6081 align-items: center;
6082 justify-content: center;
6083 gap: 12px;
6084 padding: 80px 20px;
6085 margin: 20px 0;
6086 background: #f9f9f9;
6087 border: 1px solid #e0e0e0;
6088 border-radius: 8px;
6089 color: #646970;
6090 font-size: 14px;
6091 }
6092
6093 .wpforo-ai-analytics-main-loading .wpforo-ai-loading-spinner {
6094 width: 28px;
6095 height: 28px;
6096 }
6097
6098 .wpforo-ai-analytics-main-loading.hidden {
6099 display: none;
6100 }
6101
6102 /* Hide analytics content sections while loading */
6103 .wpforo-ai-analytics-content {
6104 display: none;
6105 }
6106
6107 .wpforo-ai-analytics-content.loaded {
6108 display: block;
6109 }
6110
6111 /* Loading Spinner */
6112 .wpforo-ai-loading-spinner {
6113 width: 20px;
6114 height: 20px;
6115 border: 2px solid #f0f0f1;
6116 border-top-color: #2271b1;
6117 border-radius: 50%;
6118 animation: wpforo-ai-spin 0.8s linear infinite;
6119 display: inline-block;
6120 }
6121
6122 @keyframes wpforo-ai-spin {
6123 to {
6124 transform: rotate(360deg);
6125 }
6126 }
6127
6128 /* Usage Table */
6129 .wpforo-ai-usage-table-box {
6130 margin-bottom: 20px;
6131 }
6132
6133 .wpforo-ai-usage-table-box .wpforo-ai-box-header h3 {
6134 margin: 0;
6135 font-size: 14px;
6136 font-weight: 600;
6137 display: flex;
6138 align-items: center;
6139 gap: 8px;
6140 }
6141
6142 .wpforo-ai-usage-table {
6143 margin: 0;
6144 }
6145
6146 .wpforo-ai-usage-table th {
6147 background: #f9f9f9;
6148 font-weight: 600;
6149 padding: 12px 15px;
6150 }
6151
6152 .wpforo-ai-usage-table td {
6153 padding: 12px 15px;
6154 vertical-align: middle;
6155 }
6156
6157 .wpforo-ai-usage-table .wpforo-ai-loading-row td {
6158 text-align: center;
6159 padding: 30px;
6160 color: #646970;
6161 }
6162
6163 .wpforo-ai-usage-table .wpforo-ai-no-data td {
6164 text-align: center;
6165 padding: 30px;
6166 color: #646970;
6167 font-style: italic;
6168 }
6169
6170 .wpforo-ai-feature-name {
6171 display: flex;
6172 align-items: center;
6173 gap: 10px;
6174 }
6175
6176 .wpforo-ai-feature-color {
6177 width: 12px;
6178 height: 12px;
6179 border-radius: 2px;
6180 flex-shrink: 0;
6181 }
6182
6183 .wpforo-ai-success-rate {
6184 display: flex;
6185 align-items: center;
6186 gap: 8px;
6187 }
6188
6189 .wpforo-ai-success-rate-bar {
6190 flex: 1;
6191 max-width: 100px;
6192 height: 8px;
6193 background: #e0e0e0;
6194 border-radius: 4px;
6195 overflow: hidden;
6196 }
6197
6198 .wpforo-ai-success-rate-fill {
6199 height: 100%;
6200 background: #46b450;
6201 border-radius: 4px;
6202 transition: width 0.3s ease;
6203 }
6204
6205 .wpforo-ai-success-rate-fill.warning {
6206 background: #dba617;
6207 }
6208
6209 .wpforo-ai-success-rate-fill.error {
6210 background: #dc3232;
6211 }
6212
6213 /* Empty/Error States */
6214 .wpforo-ai-analytics-empty {
6215 text-align: center;
6216 padding: 60px 20px;
6217 color: #646970;
6218 }
6219
6220 .wpforo-ai-analytics-empty .dashicons {
6221 font-size: 48px;
6222 width: 48px;
6223 height: 48px;
6224 color: #c3c4c7;
6225 margin-bottom: 15px;
6226 }
6227
6228 .wpforo-ai-analytics-empty h3 {
6229 margin: 0 0 10px;
6230 color: #1d2327;
6231 }
6232
6233 .wpforo-ai-analytics-error {
6234 text-align: center;
6235 padding: 40px 20px;
6236 color: #dc3232;
6237 background: #fcf0f1;
6238 border-radius: 4px;
6239 }
6240
6241 .wpforo-ai-analytics-error .dashicons {
6242 font-size: 32px;
6243 width: 32px;
6244 height: 32px;
6245 margin-bottom: 10px;
6246 }
6247
6248 /* ===== Activity Heatmap ===== */
6249 .wpforo-ai-heatmap-container {
6250 padding: 15px;
6251 }
6252
6253 .wpforo-ai-heatmap {
6254 display: flex;
6255 flex-direction: column;
6256 gap: 2px;
6257 }
6258
6259 .wpforo-ai-heatmap-header {
6260 display: flex;
6261 align-items: center;
6262 margin-bottom: 4px;
6263 padding-left: 40px;
6264 }
6265
6266 .wpforo-ai-heatmap-hour-label {
6267 flex: 3;
6268 text-align: left;
6269 font-size: 10px;
6270 color: #666;
6271 }
6272
6273 .wpforo-ai-heatmap-row {
6274 display: flex;
6275 align-items: center;
6276 gap: 4px;
6277 }
6278
6279 .wpforo-ai-heatmap-day-label {
6280 width: 36px;
6281 font-size: 11px;
6282 font-weight: 500;
6283 color: #666;
6284 text-align: right;
6285 flex-shrink: 0;
6286 }
6287
6288 .wpforo-ai-heatmap-cells {
6289 display: flex;
6290 flex: 1;
6291 gap: 2px;
6292 }
6293
6294 .wpforo-ai-heatmap-cell {
6295 flex: 1;
6296 aspect-ratio: 1.5;
6297 min-height: 12px;
6298 border-radius: 2px;
6299 cursor: pointer;
6300 transition: transform 0.15s ease, box-shadow 0.15s ease;
6301 }
6302
6303 .wpforo-ai-heatmap-cell:hover {
6304 transform: scale(1.3);
6305 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
6306 z-index: 10;
6307 position: relative;
6308 }
6309
6310 .wpforo-ai-heatmap-legend {
6311 display: flex;
6312 align-items: center;
6313 justify-content: flex-end;
6314 gap: 8px;
6315 margin-top: 12px;
6316 padding-top: 12px;
6317 border-top: 1px solid #eee;
6318 }
6319
6320 .wpforo-ai-heatmap-legend-label {
6321 font-size: 11px;
6322 color: #888;
6323 }
6324
6325 .wpforo-ai-heatmap-legend-scale {
6326 display: flex;
6327 gap: 2px;
6328 }
6329
6330 .wpforo-ai-heatmap-legend-cell {
6331 width: 14px;
6332 height: 14px;
6333 border-radius: 2px;
6334 }
6335
6336 /* ===== No Data State ===== */
6337 .wpforo-ai-no-data {
6338 text-align: center;
6339 padding: 20px;
6340 color: #888;
6341 font-style: italic;
6342 }
6343
6344 /* ===== User Engagement - Top Contributors ===== */
6345 .wpforo-ai-top-contributors {
6346 padding: 10px 15px;
6347 }
6348
6349 .wpforo-ai-contributor-header,
6350 .wpforo-ai-contributor-row {
6351 display: grid;
6352 grid-template-columns: 28px 36px 1fr 90px 50px 50px;
6353 align-items: center;
6354 gap: 8px;
6355 padding: 8px 0;
6356 }
6357
6358 .wpforo-ai-contributor-header {
6359 border-bottom: 2px solid #e0e0e0;
6360 font-size: 11px;
6361 font-weight: 600;
6362 color: #646970;
6363 text-transform: uppercase;
6364 padding-bottom: 10px;
6365 margin-bottom: 4px;
6366 }
6367
6368 .wpforo-ai-contributor-header > div {
6369 text-align: center;
6370 }
6371
6372 .wpforo-ai-contributor-name-header {
6373 text-align: left !important;
6374 }
6375
6376 .wpforo-ai-contributor-group-header {
6377 text-align: left !important;
6378 }
6379
6380 .wpforo-ai-contributor-row {
6381 border-bottom: 1px solid #f0f0f1;
6382 }
6383
6384 .wpforo-ai-contributor-row:last-child {
6385 border-bottom: none;
6386 }
6387
6388 .wpforo-ai-contributor-row:hover {
6389 background: #f9f9f9;
6390 margin: 0 -15px;
6391 padding-left: 15px;
6392 padding-right: 15px;
6393 }
6394
6395 .wpforo-ai-contributor-rank {
6396 width: 24px;
6397 height: 24px;
6398 display: flex;
6399 align-items: center;
6400 justify-content: center;
6401 background: #f0f0f1;
6402 border-radius: 50%;
6403 font-size: 11px;
6404 font-weight: 600;
6405 color: #50575e;
6406 }
6407
6408 .wpforo-ai-contributor-row:nth-child(2) .wpforo-ai-contributor-rank {
6409 background: linear-gradient(135deg, #ffd700 0%, #ffb800 100%);
6410 color: #fff;
6411 }
6412
6413 .wpforo-ai-contributor-row:nth-child(3) .wpforo-ai-contributor-rank {
6414 background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
6415 color: #fff;
6416 }
6417
6418 .wpforo-ai-contributor-row:nth-child(4) .wpforo-ai-contributor-rank {
6419 background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
6420 color: #fff;
6421 }
6422
6423 .wpforo-ai-contributor-avatar-col {
6424 display: flex;
6425 align-items: center;
6426 justify-content: center;
6427 }
6428
6429 .wpforo-ai-contributor-avatar {
6430 width: 32px !important;
6431 height: 32px !important;
6432 border-radius: 50% !important;
6433 object-fit: cover;
6434 }
6435
6436 .wpforo-ai-contributor-name {
6437 font-weight: 500;
6438 color: #1d2327;
6439 white-space: nowrap;
6440 overflow: hidden;
6441 text-overflow: ellipsis;
6442 min-width: 0;
6443 }
6444
6445 .wpforo-ai-contributor-name a {
6446 color: #2271b1;
6447 text-decoration: none;
6448 }
6449
6450 .wpforo-ai-contributor-name a:hover {
6451 color: #135e96;
6452 text-decoration: underline;
6453 }
6454
6455 .wpforo-ai-contributor-group {
6456 white-space: nowrap;
6457 overflow: hidden;
6458 text-overflow: ellipsis;
6459 }
6460
6461 .wpforo-ai-usergroup-badge {
6462 font-size: 12px;
6463 font-weight: 500;
6464 }
6465
6466 .wpforo-ai-contributor-topics,
6467 .wpforo-ai-contributor-posts {
6468 font-size: 13px;
6469 font-weight: 600;
6470 color: #1d2327;
6471 text-align: center;
6472 }
6473
6474 /* ===== User Engagement - Recent Registrations Table ===== */
6475 .wpforo-ai-registrations-table {
6476 margin: 0;
6477 }
6478
6479 .wpforo-ai-registrations-table th {
6480 background: #f9f9f9;
6481 font-weight: 600;
6482 padding: 10px 12px;
6483 text-align: left;
6484 }
6485
6486 .wpforo-ai-registrations-table td {
6487 padding: 10px 12px;
6488 vertical-align: middle;
6489 border-bottom: 1px solid #f0f0f1;
6490 }
6491
6492 .wpforo-ai-registrations-table tr:last-child td {
6493 border-bottom: none;
6494 }
6495
6496 .wpforo-ai-registrations-table .wpforo-ai-user-cell {
6497 display: flex;
6498 align-items: center;
6499 gap: 10px;
6500 }
6501
6502 .wpforo-ai-registrations-table .wpforo-ai-user-avatar {
6503 width: 32px;
6504 height: 32px;
6505 border-radius: 50%;
6506 object-fit: cover;
6507 }
6508
6509 .wpforo-ai-registrations-table .wpforo-ai-user-name a {
6510 color: #2271b1;
6511 text-decoration: none;
6512 font-weight: 500;
6513 }
6514
6515 .wpforo-ai-registrations-table .wpforo-ai-user-name a:hover {
6516 text-decoration: underline;
6517 }
6518
6519 .wpforo-ai-posts-badge {
6520 display: inline-flex;
6521 align-items: center;
6522 justify-content: center;
6523 min-width: 28px;
6524 padding: 2px 8px;
6525 background: #f0f0f1;
6526 border-radius: 10px;
6527 font-size: 12px;
6528 font-weight: 500;
6529 color: #50575e;
6530 }
6531
6532 .wpforo-ai-posts-badge.has-posts {
6533 background: #e6f3e6;
6534 color: #1e7e34;
6535 }
6536
6537 /* ==========================================================================
6538 Content Performance Sub-tab
6539 ========================================================================== */
6540
6541 /* Content Performance Table-like List */
6542 .wpforo-ai-content-perf-list {
6543 margin: 0;
6544 padding: 0;
6545 }
6546
6547 .wpforo-ai-content-perf-header,
6548 .wpforo-ai-content-perf-row {
6549 display: grid;
6550 grid-template-columns: 30px 1fr 70px 70px;
6551 gap: 12px;
6552 align-items: center;
6553 padding: 10px 0;
6554 }
6555
6556 .wpforo-ai-content-perf-header {
6557 border-bottom: 2px solid #e1e4e8;
6558 font-weight: 600;
6559 font-size: 12px;
6560 color: #646970;
6561 text-transform: uppercase;
6562 letter-spacing: 0.3px;
6563 }
6564
6565 .wpforo-ai-content-perf-row {
6566 border-bottom: 1px solid #f0f0f1;
6567 }
6568
6569 .wpforo-ai-content-perf-row:last-child {
6570 border-bottom: none;
6571 }
6572
6573 .wpforo-ai-content-perf-row:hover {
6574 background: #f9f9f9;
6575 }
6576
6577 /* Column styles */
6578 .wpforo-ai-content-perf-col-rank {
6579 font-weight: 600;
6580 color: #646970;
6581 text-align: center;
6582 }
6583
6584 .wpforo-ai-content-perf-col-title {
6585 min-width: 0;
6586 overflow: hidden;
6587 }
6588
6589 .wpforo-ai-content-perf-col-title a {
6590 display: block;
6591 color: #2271b1;
6592 text-decoration: none;
6593 font-weight: 500;
6594 white-space: nowrap;
6595 overflow: hidden;
6596 text-overflow: ellipsis;
6597 }
6598
6599 .wpforo-ai-content-perf-col-title a:hover {
6600 color: #135e96;
6601 text-decoration: underline;
6602 }
6603
6604 .wpforo-ai-content-perf-col-title small {
6605 display: block;
6606 font-size: 11px;
6607 color: #646970;
6608 font-weight: normal;
6609 margin-top: 2px;
6610 }
6611
6612 .wpforo-ai-content-perf-col-views,
6613 .wpforo-ai-content-perf-col-replies {
6614 text-align: right;
6615 font-weight: 600;
6616 font-size: 13px;
6617 color: #1d2327;
6618 }
6619
6620 /* Header column styles */
6621 .wpforo-ai-content-perf-header .wpforo-ai-content-perf-col-views,
6622 .wpforo-ai-content-perf-header .wpforo-ai-content-perf-col-replies {
6623 font-weight: 600;
6624 color: #646970;
6625 }
6626
6627 .wpforo-ai-reply-btn {
6628 display: inline-flex;
6629 align-items: center;
6630 gap: 4px;
6631 padding: 6px 12px;
6632 background: #2271b1;
6633 color: #fff;
6634 border-radius: 4px;
6635 text-decoration: none;
6636 font-size: 12px;
6637 font-weight: 500;
6638 transition: background-color 0.2s;
6639 }
6640
6641 .wpforo-ai-reply-btn:hover {
6642 background: #135e96;
6643 color: #fff;
6644 }
6645
6646 .wpforo-ai-reply-btn .dashicons {
6647 font-size: 14px;
6648 width: 14px;
6649 height: 14px;
6650 }
6651
6652 /* Tag Cloud */
6653 .wpforo-ai-tag-cloud {
6654 display: flex;
6655 flex-wrap: wrap;
6656 gap: 8px;
6657 padding: 10px 0;
6658 }
6659
6660 .wpforo-ai-tag {
6661 display: inline-flex;
6662 align-items: center;
6663 gap: 6px;
6664 padding: 6px 12px;
6665 background: #f0f0f1;
6666 border-radius: 16px;
6667 text-decoration: none;
6668 color: #1d2327;
6669 font-size: 13px;
6670 transition: all 0.2s;
6671 }
6672
6673 .wpforo-ai-tag:hover {
6674 background: #2271b1;
6675 color: #fff;
6676 }
6677
6678 .wpforo-ai-tag-count {
6679 display: inline-flex;
6680 align-items: center;
6681 justify-content: center;
6682 min-width: 20px;
6683 height: 20px;
6684 padding: 0 6px;
6685 background: rgba(0, 0, 0, 0.1);
6686 border-radius: 10px;
6687 font-size: 11px;
6688 font-weight: 600;
6689 }
6690
6691 .wpforo-ai-tag:hover .wpforo-ai-tag-count {
6692 background: rgba(255, 255, 255, 0.2);
6693 }
6694
6695 /* Tag size variations based on popularity */
6696 .wpforo-ai-tag.size-1 { font-size: 12px; }
6697 .wpforo-ai-tag.size-2 { font-size: 13px; }
6698 .wpforo-ai-tag.size-3 { font-size: 14px; font-weight: 500; }
6699 .wpforo-ai-tag.size-4 { font-size: 15px; font-weight: 500; }
6700 .wpforo-ai-tag.size-5 { font-size: 16px; font-weight: 600; }
6701
6702 /* Content Distribution Chart Container */
6703 .wpforo-ai-distribution-chart-container {
6704 position: relative;
6705 height: 300px;
6706 padding: 10px;
6707 }
6708
6709 /* Empty State for Content */
6710 .wpforo-ai-content-empty {
6711 text-align: center;
6712 padding: 30px 20px;
6713 color: #646970;
6714 }
6715
6716 .wpforo-ai-content-empty .dashicons {
6717 font-size: 48px;
6718 width: 48px;
6719 height: 48px;
6720 color: #dcdcde;
6721 margin-bottom: 10px;
6722 }
6723
6724 .wpforo-ai-content-empty p {
6725 margin: 0;
6726 font-size: 14px;
6727 }
6728
6729 /* ==========================================================================
6730 AI Insights Sub-tab Styles
6731 ========================================================================== */
6732
6733 /* Container */
6734 .wpforo-ai-insights-container {
6735 display: flex;
6736 flex-direction: column;
6737 gap: 20px;
6738 }
6739
6740 /* Credits Info Banner */
6741 .wpforo-ai-insights-credits-box {
6742 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
6743 border: none;
6744 border-radius: 8px;
6745 }
6746
6747 .wpforo-ai-insights-credits-box .wpforo-ai-box-body {
6748 padding: 20px 24px;
6749 }
6750
6751 .wpforo-ai-insights-credits-info {
6752 display: flex;
6753 align-items: center;
6754 gap: 20px;
6755 color: #fff;
6756 }
6757
6758 .wpforo-ai-insights-credits-icon {
6759 flex-shrink: 0;
6760 }
6761
6762 .wpforo-ai-insights-credits-icon .dashicons {
6763 font-size: 40px;
6764 width: 40px;
6765 height: 40px;
6766 color: rgba(255, 255, 255, 0.9);
6767 }
6768
6769 .wpforo-ai-insights-credits-text {
6770 flex: 1;
6771 }
6772
6773 .wpforo-ai-insights-credits-text strong {
6774 display: block;
6775 font-size: 18px;
6776 margin-bottom: 4px;
6777 }
6778
6779 .wpforo-ai-insights-credits-text p {
6780 margin: 0;
6781 font-size: 14px;
6782 opacity: 0.9;
6783 }
6784
6785 .wpforo-ai-insights-credits-balance {
6786 flex-shrink: 0;
6787 text-align: center;
6788 background: rgba(255, 255, 255, 0.15);
6789 padding: 12px 24px;
6790 border-radius: 8px;
6791 }
6792
6793 .wpforo-ai-insights-credits-number {
6794 display: block;
6795 font-size: 32px;
6796 font-weight: 700;
6797 line-height: 1;
6798 }
6799
6800 .wpforo-ai-insights-credits-label {
6801 display: block;
6802 font-size: 12px;
6803 opacity: 0.9;
6804 margin-top: 4px;
6805 }
6806
6807 /* Insights Grid */
6808 .wpforo-ai-insights-grid {
6809 display: grid;
6810 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
6811 gap: 20px;
6812 }
6813
6814 /* Top row grid - 2 columns (half width each) */
6815 .wpforo-ai-insights-grid-top {
6816 grid-template-columns: repeat(2, 1fr);
6817 }
6818
6819 @media (max-width: 768px) {
6820 .wpforo-ai-insights-grid-top {
6821 grid-template-columns: 1fr;
6822 }
6823 }
6824
6825 /* Insight Widget */
6826 .wpforo-ai-insights-widget {
6827 display: flex;
6828 flex-direction: column;
6829 }
6830
6831 .wpforo-ai-insights-widget .wpforo-ai-box-header {
6832 display: flex;
6833 justify-content: space-between;
6834 align-items: center;
6835 padding: 16px 20px;
6836 background: #f6f7f7;
6837 border-bottom: 1px solid #dcdcde;
6838 }
6839
6840 .wpforo-ai-insights-widget .wpforo-ai-box-header h3 {
6841 margin: 0;
6842 font-size: 15px;
6843 font-weight: 600;
6844 display: flex;
6845 align-items: center;
6846 gap: 8px;
6847 }
6848
6849 .wpforo-ai-insights-widget .wpforo-ai-box-header h3 .dashicons {
6850 color: #2271b1;
6851 }
6852
6853 .wpforo-ai-insights-credits-cost {
6854 background: #f0f0f1;
6855 padding: 4px 10px;
6856 border-radius: 12px;
6857 font-size: 12px;
6858 font-weight: 500;
6859 color: #646970;
6860 }
6861
6862 .wpforo-ai-insights-widget .wpforo-ai-box-body {
6863 flex: 1;
6864 display: flex;
6865 flex-direction: column;
6866 padding: 20px;
6867 }
6868
6869 .wpforo-ai-insights-description {
6870 color: #646970;
6871 font-size: 13px;
6872 line-height: 1.5;
6873 margin: 0 0 10px 0;
6874 }
6875
6876 .wpforo-ai-insights-period {
6877 display: flex;
6878 align-items: center;
6879 gap: 6px;
6880 color: #787c82;
6881 font-size: 12px;
6882 margin: 0 0 16px 0;
6883 padding: 6px 10px;
6884 background: #f0f6fc;
6885 border-radius: 4px;
6886 border-left: 3px solid #2271b1;
6887 }
6888
6889 .wpforo-ai-insights-period .dashicons {
6890 font-size: 14px;
6891 width: 14px;
6892 height: 14px;
6893 color: #2271b1;
6894 }
6895
6896 /* Results Container */
6897 .wpforo-ai-insights-results {
6898 flex: 1;
6899 margin-bottom: 16px;
6900 padding: 16px;
6901 background: #f9f9f9;
6902 border-radius: 6px;
6903 border: 1px solid #e0e0e0;
6904 }
6905
6906 .wpforo-ai-insights-cached-notice {
6907 display: flex;
6908 align-items: center;
6909 gap: 6px;
6910 margin-top: 12px;
6911 padding-top: 12px;
6912 border-top: 1px dashed #dcdcde;
6913 font-size: 12px;
6914 color: #646970;
6915 }
6916
6917 .wpforo-ai-insights-cached-notice .dashicons {
6918 font-size: 14px;
6919 width: 14px;
6920 height: 14px;
6921 }
6922
6923 /* Loading State */
6924 .wpforo-ai-insights-loading {
6925 display: flex;
6926 align-items: center;
6927 justify-content: center;
6928 gap: 10px;
6929 padding: 30px;
6930 color: #646970;
6931 }
6932
6933 .wpforo-ai-insights-loading .spinner {
6934 float: none;
6935 margin: 0;
6936 }
6937
6938 /* Error State */
6939 .wpforo-ai-insights-error {
6940 padding: 12px 16px;
6941 background: #fcf0f1;
6942 border: 1px solid #d63638;
6943 border-radius: 4px;
6944 color: #d63638;
6945 font-size: 13px;
6946 margin-bottom: 16px;
6947 }
6948
6949 /* Action Buttons */
6950 .wpforo-ai-insights-actions {
6951 display: flex;
6952 align-items: center;
6953 gap: 12px;
6954 margin-top: auto;
6955 }
6956
6957 .wpforo-ai-run-insight-btn {
6958 display: inline-flex;
6959 align-items: center;
6960 gap: 6px;
6961 }
6962
6963 .wpforo-ai-run-insight-btn .dashicons {
6964 font-size: 16px;
6965 width: 16px;
6966 height: 16px;
6967 }
6968
6969 .wpforo-ai-insights-insufficient {
6970 color: #d63638;
6971 font-size: 12px;
6972 }
6973
6974 .wpforo-ai-insights-daily-used {
6975 color: #646970;
6976 font-size: 12px;
6977 display: inline-flex;
6978 align-items: center;
6979 gap: 4px;
6980 }
6981
6982 .wpforo-ai-insights-daily-used .dashicons {
6983 font-size: 14px;
6984 width: 14px;
6985 height: 14px;
6986 }
6987
6988 .wpforo-ai-insights-outdated-notice {
6989 color: #996800;
6990 font-size: 12px;
6991 display: inline-flex;
6992 align-items: center;
6993 gap: 4px;
6994 background: #fcf9e8;
6995 padding: 4px 10px;
6996 border-radius: 4px;
6997 border: 1px solid #dba617;
6998 margin-left: 10px;
6999 }
7000
7001 .wpforo-ai-insights-outdated-notice .dashicons {
7002 font-size: 14px;
7003 width: 14px;
7004 height: 14px;
7005 color: #dba617;
7006 }
7007
7008 .wpforo-ai-daily-limit-badge {
7009 background: #dcdcde;
7010 color: #50575e;
7011 font-size: 10px;
7012 font-weight: 600;
7013 padding: 2px 6px;
7014 border-radius: 10px;
7015 margin-left: 8px;
7016 text-transform: uppercase;
7017 }
7018
7019 /* Sentiment Results */
7020 .wpforo-ai-sentiment-results {
7021 /* Container */
7022 }
7023
7024 .wpforo-ai-sentiment-bars {
7025 display: flex;
7026 flex-direction: column;
7027 gap: 12px;
7028 }
7029
7030 .wpforo-ai-sentiment-bar {
7031 display: grid;
7032 grid-template-columns: 32px 70px 1fr 50px;
7033 align-items: center;
7034 gap: 10px;
7035 }
7036
7037 .wpforo-ai-sentiment-emoji {
7038 font-size: 20px;
7039 text-align: center;
7040 }
7041
7042 .wpforo-ai-sentiment-label {
7043 font-size: 13px;
7044 font-weight: 500;
7045 color: #1d2327;
7046 }
7047
7048 .wpforo-ai-sentiment-bar-track {
7049 height: 12px;
7050 background: #e0e0e0;
7051 border-radius: 6px;
7052 overflow: hidden;
7053 }
7054
7055 .wpforo-ai-sentiment-bar-fill {
7056 height: 100%;
7057 border-radius: 6px;
7058 transition: width 0.5s ease;
7059 }
7060
7061 .wpforo-ai-sentiment-bar.positive .wpforo-ai-sentiment-bar-fill {
7062 background: linear-gradient(90deg, #4caf50 0%, #81c784 100%);
7063 }
7064
7065 .wpforo-ai-sentiment-bar.neutral .wpforo-ai-sentiment-bar-fill {
7066 background: linear-gradient(90deg, #9e9e9e 0%, #bdbdbd 100%);
7067 }
7068
7069 .wpforo-ai-sentiment-bar.negative .wpforo-ai-sentiment-bar-fill {
7070 background: linear-gradient(90deg, #f44336 0%, #e57373 100%);
7071 }
7072
7073 .wpforo-ai-sentiment-percent {
7074 font-size: 14px;
7075 font-weight: 600;
7076 color: #1d2327;
7077 text-align: right;
7078 }
7079
7080 .wpforo-ai-sentiment-trend {
7081 display: flex;
7082 align-items: center;
7083 gap: 6px;
7084 margin-top: 16px;
7085 padding-top: 12px;
7086 border-top: 1px solid #e0e0e0;
7087 font-size: 13px;
7088 color: #646970;
7089 }
7090
7091 .wpforo-ai-sentiment-trend .dashicons-arrow-up-alt {
7092 color: #4caf50;
7093 }
7094
7095 .wpforo-ai-sentiment-trend .dashicons-arrow-down-alt {
7096 color: #f44336;
7097 }
7098
7099 .wpforo-ai-sentiment-summary {
7100 margin-top: 12px;
7101 padding: 12px;
7102 background: #fff;
7103 border-radius: 4px;
7104 font-size: 13px;
7105 line-height: 1.5;
7106 color: #50575e;
7107 }
7108
7109 .wpforo-ai-sentiment-summary p {
7110 margin: 0;
7111 }
7112
7113 /* Trending Topics Results */
7114 .wpforo-ai-trending-results {
7115 /* Container */
7116 }
7117
7118 .wpforo-ai-trending-list {
7119 list-style: none;
7120 margin: 0;
7121 padding: 0;
7122 }
7123
7124 .wpforo-ai-trending-item {
7125 display: flex;
7126 align-items: center;
7127 gap: 12px;
7128 padding: 10px 0;
7129 border-bottom: 1px solid #e0e0e0;
7130 }
7131
7132 .wpforo-ai-trending-item:last-child {
7133 border-bottom: none;
7134 }
7135
7136 .wpforo-ai-trending-rank {
7137 display: flex;
7138 align-items: center;
7139 justify-content: center;
7140 width: 24px;
7141 height: 24px;
7142 background: #2271b1;
7143 color: #fff;
7144 border-radius: 50%;
7145 font-size: 12px;
7146 font-weight: 600;
7147 flex-shrink: 0;
7148 }
7149
7150 .wpforo-ai-trending-item:nth-child(1) .wpforo-ai-trending-rank {
7151 background: #f5a623;
7152 }
7153
7154 .wpforo-ai-trending-item:nth-child(2) .wpforo-ai-trending-rank {
7155 background: #9e9e9e;
7156 }
7157
7158 .wpforo-ai-trending-item:nth-child(3) .wpforo-ai-trending-rank {
7159 background: #cd7f32;
7160 }
7161
7162 .wpforo-ai-trending-title {
7163 flex: 1;
7164 font-size: 14px;
7165 color: #1d2327;
7166 }
7167
7168 .wpforo-ai-trending-heat {
7169 flex-shrink: 0;
7170 font-size: 13px;
7171 }
7172
7173 .wpforo-ai-trending-summary {
7174 margin-top: 12px;
7175 padding: 12px;
7176 background: #fff;
7177 border-radius: 4px;
7178 font-size: 13px;
7179 line-height: 1.5;
7180 color: #50575e;
7181 }
7182
7183 .wpforo-ai-trending-summary p {
7184 margin: 0;
7185 }
7186
7187 /* Recommendations Results */
7188 .wpforo-ai-recommendations-results {
7189 /* Container */
7190 }
7191
7192 .wpforo-ai-recommendations-list {
7193 list-style: none;
7194 margin: 0;
7195 padding: 0;
7196 display: flex;
7197 flex-direction: column;
7198 gap: 12px;
7199 }
7200
7201 .wpforo-ai-recommendation-item {
7202 display: flex;
7203 align-items: flex-start;
7204 gap: 12px;
7205 padding: 12px;
7206 background: #fff;
7207 border-radius: 6px;
7208 border-left: 3px solid #2271b1;
7209 }
7210
7211 .wpforo-ai-recommendation-item.priority-high {
7212 border-left-color: #d63638;
7213 background: #fef7f7;
7214 }
7215
7216 .wpforo-ai-recommendation-item.priority-low {
7217 border-left-color: #9e9e9e;
7218 }
7219
7220 .wpforo-ai-recommendation-icon {
7221 flex-shrink: 0;
7222 }
7223
7224 .wpforo-ai-recommendation-icon .dashicons {
7225 font-size: 20px;
7226 width: 20px;
7227 height: 20px;
7228 color: #f5a623;
7229 }
7230
7231 .wpforo-ai-recommendation-content {
7232 flex: 1;
7233 min-width: 0;
7234 }
7235
7236 .wpforo-ai-recommendation-content strong {
7237 display: block;
7238 font-size: 14px;
7239 color: #1d2327;
7240 margin-bottom: 4px;
7241 }
7242
7243 .wpforo-ai-recommendation-content p {
7244 margin: 0;
7245 font-size: 13px;
7246 color: #646970;
7247 line-height: 1.4;
7248 }
7249
7250 .wpforo-ai-recommendation-priority {
7251 flex-shrink: 0;
7252 padding: 2px 8px;
7253 border-radius: 10px;
7254 font-size: 11px;
7255 font-weight: 600;
7256 text-transform: uppercase;
7257 }
7258
7259 .wpforo-ai-recommendation-item.priority-high .wpforo-ai-recommendation-priority {
7260 background: #d63638;
7261 color: #fff;
7262 }
7263
7264 .wpforo-ai-recommendations-summary {
7265 margin-top: 12px;
7266 padding: 12px;
7267 background: #fff;
7268 border-radius: 4px;
7269 font-size: 13px;
7270 line-height: 1.5;
7271 color: #50575e;
7272 }
7273
7274 .wpforo-ai-recommendations-summary p {
7275 margin: 0;
7276 }
7277
7278 /* Info Box */
7279 .wpforo-ai-insights-info-box {
7280 background: #f0f6fc;
7281 border: 1px solid #c3c4c7;
7282 }
7283
7284 .wpforo-ai-insights-info-box h4 {
7285 display: flex;
7286 align-items: center;
7287 gap: 8px;
7288 margin: 0 0 12px 0;
7289 font-size: 14px;
7290 color: #1d2327;
7291 }
7292
7293 .wpforo-ai-insights-info-box h4 .dashicons {
7294 color: #2271b1;
7295 }
7296
7297 .wpforo-ai-insights-info-list {
7298 margin: 0;
7299 padding-left: 20px;
7300 }
7301
7302 .wpforo-ai-insights-info-list li {
7303 font-size: 13px;
7304 color: #50575e;
7305 margin-bottom: 6px;
7306 line-height: 1.5;
7307 }
7308
7309 .wpforo-ai-insights-info-list li:last-child {
7310 margin-bottom: 0;
7311 }
7312
7313 /* Confirmation Modal */
7314 .wpforo-ai-insights-modal-overlay {
7315 position: fixed;
7316 top: 0;
7317 left: 0;
7318 right: 0;
7319 bottom: 0;
7320 background: rgba(0, 0, 0, 0.5);
7321 display: flex;
7322 align-items: center;
7323 justify-content: center;
7324 z-index: 100000;
7325 }
7326
7327 .wpforo-ai-insights-modal {
7328 background: #fff;
7329 border-radius: 8px;
7330 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
7331 max-width: 400px;
7332 width: 90%;
7333 }
7334
7335 .wpforo-ai-insights-modal-header {
7336 padding: 20px 24px;
7337 border-bottom: 1px solid #dcdcde;
7338 }
7339
7340 .wpforo-ai-insights-modal-header h3 {
7341 margin: 0;
7342 font-size: 18px;
7343 color: #1d2327;
7344 }
7345
7346 .wpforo-ai-insights-modal-body {
7347 padding: 20px 24px;
7348 }
7349
7350 .wpforo-ai-insights-modal-body p {
7351 margin: 0;
7352 font-size: 14px;
7353 color: #50575e;
7354 line-height: 1.5;
7355 }
7356
7357 .wpforo-ai-insights-modal-footer {
7358 display: flex;
7359 justify-content: flex-end;
7360 gap: 12px;
7361 padding: 16px 24px;
7362 background: #f6f7f7;
7363 border-top: 1px solid #dcdcde;
7364 border-radius: 0 0 8px 8px;
7365 }
7366
7367 /* Responsive */
7368 @media (max-width: 782px) {
7369 .wpforo-ai-insights-credits-info {
7370 flex-direction: column;
7371 text-align: center;
7372 }
7373
7374 .wpforo-ai-insights-credits-balance {
7375 width: 100%;
7376 }
7377
7378 .wpforo-ai-insights-grid {
7379 grid-template-columns: 1fr;
7380 }
7381
7382 .wpforo-ai-sentiment-bar {
7383 grid-template-columns: 28px 60px 1fr 40px;
7384 gap: 8px;
7385 }
7386 }
7387
7388 /* ==========================================================================
7389 AI Insights - Full Width Grid Layout
7390 ========================================================================== */
7391
7392 .wpforo-ai-insights-grid-full {
7393 display: grid;
7394 grid-template-columns: 1fr;
7395 gap: 20px;
7396 margin-top: 20px;
7397 }
7398
7399 .wpforo-ai-insights-widget-full {
7400 display: flex;
7401 flex-direction: column;
7402 }
7403
7404 .wpforo-ai-insights-widget-full .wpforo-ai-box-header {
7405 display: flex;
7406 justify-content: space-between;
7407 align-items: center;
7408 padding: 16px 24px;
7409 background: linear-gradient(135deg, #f6f7f7 0%, #e8eaed 100%);
7410 border-bottom: 1px solid #dcdcde;
7411 }
7412
7413 .wpforo-ai-insights-widget-full .wpforo-ai-box-header h3 {
7414 margin: 0;
7415 font-size: 16px;
7416 font-weight: 600;
7417 display: flex;
7418 align-items: center;
7419 gap: 10px;
7420 }
7421
7422 .wpforo-ai-insights-widget-full .wpforo-ai-box-body {
7423 padding: 24px;
7424 }
7425
7426 /* ==========================================================================
7427 Deep Analysis Results
7428 ========================================================================== */
7429
7430 .wpforo-ai-deep-analysis-results {
7431 display: grid;
7432 grid-template-columns: repeat(3, 1fr);
7433 gap: 20px;
7434 }
7435
7436 .wpforo-ai-deep-section {
7437 background: #fff;
7438 border: 1px solid #e0e0e0;
7439 border-radius: 8px;
7440 padding: 20px;
7441 }
7442
7443 .wpforo-ai-deep-section h4 {
7444 display: flex;
7445 align-items: center;
7446 gap: 8px;
7447 margin: 0 0 16px 0;
7448 font-size: 14px;
7449 font-weight: 600;
7450 color: #1d2327;
7451 padding-bottom: 12px;
7452 border-bottom: 1px solid #f0f0f0;
7453 }
7454
7455 .wpforo-ai-deep-section h4 .dashicons {
7456 color: #2271b1;
7457 }
7458
7459 .wpforo-ai-deep-metrics {
7460 display: flex;
7461 flex-wrap: wrap;
7462 gap: 16px;
7463 margin-bottom: 16px;
7464 }
7465
7466 .wpforo-ai-metric {
7467 flex: 1;
7468 min-width: 80px;
7469 text-align: center;
7470 padding: 12px;
7471 background: #f9f9f9;
7472 border-radius: 6px;
7473 }
7474
7475 .wpforo-ai-metric-value {
7476 display: block;
7477 font-size: 24px;
7478 font-weight: 700;
7479 color: #2271b1;
7480 line-height: 1.2;
7481 }
7482
7483 .wpforo-ai-metric-label {
7484 display: block;
7485 font-size: 11px;
7486 color: #646970;
7487 margin-top: 4px;
7488 text-transform: uppercase;
7489 letter-spacing: 0.5px;
7490 }
7491
7492 .wpforo-ai-top-repliers {
7493 margin-top: 12px;
7494 padding-top: 12px;
7495 border-top: 1px solid #f0f0f0;
7496 }
7497
7498 .wpforo-ai-top-repliers strong {
7499 display: block;
7500 font-size: 12px;
7501 color: #646970;
7502 margin-bottom: 8px;
7503 }
7504
7505 .wpforo-ai-replier-badge {
7506 display: inline-block;
7507 padding: 4px 10px;
7508 margin: 2px 4px 2px 0;
7509 border-radius: 12px;
7510 font-size: 12px;
7511 background: #f0f0f0;
7512 }
7513
7514 .wpforo-ai-replier-badge.sentiment-positive {
7515 background: #d4edda;
7516 color: #155724;
7517 }
7518
7519 .wpforo-ai-replier-badge.sentiment-negative {
7520 background: #f8d7da;
7521 color: #721c24;
7522 }
7523
7524 .wpforo-ai-replier-badge.sentiment-neutral {
7525 background: #e2e3e5;
7526 color: #383d41;
7527 }
7528
7529 .wpforo-ai-section-summary {
7530 margin: 12px 0 0 0;
7531 font-size: 13px;
7532 color: #50575e;
7533 line-height: 1.5;
7534 font-style: italic;
7535 }
7536
7537 /* Keyword Hotspots */
7538 .wpforo-ai-keyword-hotspots {
7539 display: flex;
7540 flex-wrap: wrap;
7541 gap: 8px;
7542 }
7543
7544 .wpforo-ai-keyword-tag {
7545 display: inline-flex;
7546 align-items: center;
7547 gap: 6px;
7548 padding: 6px 12px;
7549 border-radius: 16px;
7550 border: 2px solid;
7551 font-size: 13px;
7552 }
7553
7554 .wpforo-ai-keyword-text {
7555 font-weight: 500;
7556 }
7557
7558 .wpforo-ai-keyword-heat {
7559 display: inline-flex;
7560 align-items: center;
7561 justify-content: center;
7562 min-width: 24px;
7563 height: 20px;
7564 padding: 0 6px;
7565 border-radius: 10px;
7566 font-size: 11px;
7567 font-weight: 600;
7568 color: #fff;
7569 }
7570
7571 /* Contributors Mood */
7572 .wpforo-ai-contributors-mood {
7573 display: flex;
7574 align-items: center;
7575 gap: 20px;
7576 }
7577
7578 .wpforo-ai-mood-indicator {
7579 display: flex;
7580 align-items: center;
7581 gap: 8px;
7582 }
7583
7584 .wpforo-ai-mood-emoji {
7585 font-size: 32px;
7586 }
7587
7588 .wpforo-ai-mood-label {
7589 font-size: 16px;
7590 font-weight: 600;
7591 color: #1d2327;
7592 }
7593
7594 .wpforo-ai-mood-breakdown {
7595 flex: 1;
7596 display: flex;
7597 gap: 4px;
7598 height: 24px;
7599 background: #e0e0e0;
7600 border-radius: 4px;
7601 overflow: hidden;
7602 }
7603
7604 .wpforo-ai-mood-bar {
7605 display: flex;
7606 align-items: center;
7607 justify-content: center;
7608 font-size: 11px;
7609 font-weight: 600;
7610 color: #fff;
7611 min-width: 30px;
7612 }
7613
7614 .wpforo-ai-mood-bar.positive {
7615 background: #4CAF50;
7616 }
7617
7618 .wpforo-ai-mood-bar.negative {
7619 background: #F44336;
7620 }
7621
7622 /* Contributors Mood - New Grid Layout */
7623 .wpforo-ai-section-note {
7624 margin: 0 0 16px 0;
7625 font-size: 12px;
7626 color: #646970;
7627 font-style: italic;
7628 }
7629
7630 .wpforo-ai-contributors-mood-grid {
7631 display: grid;
7632 grid-template-columns: repeat(3, 1fr);
7633 gap: 16px;
7634 }
7635
7636 .wpforo-ai-mood-stat {
7637 display: flex;
7638 flex-direction: column;
7639 align-items: center;
7640 padding: 16px 12px;
7641 background: #f9f9f9;
7642 border-radius: 8px;
7643 border: 2px solid transparent;
7644 transition: border-color 0.2s ease, background 0.2s ease;
7645 }
7646
7647 .wpforo-ai-mood-stat.positive {
7648 border-color: #c8e6c9;
7649 background: linear-gradient(to bottom, #f1f8e9, #e8f5e9);
7650 }
7651
7652 .wpforo-ai-mood-stat.neutral {
7653 border-color: #e0e0e0;
7654 background: linear-gradient(to bottom, #fafafa, #f5f5f5);
7655 }
7656
7657 .wpforo-ai-mood-stat.negative {
7658 border-color: #ffcdd2;
7659 background: linear-gradient(to bottom, #ffebee, #fce4ec);
7660 }
7661
7662 .wpforo-ai-mood-stat-icon {
7663 font-size: 28px;
7664 margin-bottom: 8px;
7665 }
7666
7667 .wpforo-ai-mood-stat-info {
7668 text-align: center;
7669 margin-bottom: 12px;
7670 }
7671
7672 .wpforo-ai-mood-stat-value {
7673 font-size: 22px;
7674 font-weight: 700;
7675 color: #1d2327;
7676 line-height: 1.2;
7677 }
7678
7679 .wpforo-ai-mood-stat-label {
7680 font-size: 12px;
7681 color: #646970;
7682 text-transform: uppercase;
7683 letter-spacing: 0.5px;
7684 margin-top: 2px;
7685 }
7686
7687 .wpforo-ai-mood-stat-bar {
7688 width: 100%;
7689 height: 8px;
7690 background: #e0e0e0;
7691 border-radius: 4px;
7692 overflow: hidden;
7693 }
7694
7695 .wpforo-ai-mood-stat-bar-fill {
7696 height: 100%;
7697 border-radius: 4px;
7698 transition: width 0.5s ease;
7699 }
7700
7701 .wpforo-ai-mood-stat-bar-fill.positive {
7702 background: linear-gradient(90deg, #66bb6a 0%, #4caf50 100%);
7703 }
7704
7705 .wpforo-ai-mood-stat-bar-fill.neutral {
7706 background: linear-gradient(90deg, #bdbdbd 0%, #9e9e9e 100%);
7707 }
7708
7709 .wpforo-ai-mood-stat-bar-fill.negative {
7710 background: linear-gradient(90deg, #ef5350 0%, #e53935 100%);
7711 }
7712
7713 .wpforo-ai-mood-influence {
7714 margin-top: 16px;
7715 padding: 12px;
7716 background: #fff;
7717 border-radius: 6px;
7718 font-size: 13px;
7719 color: #50575e;
7720 line-height: 1.5;
7721 }
7722
7723 .wpforo-ai-mood-influence strong {
7724 color: #1d2327;
7725 margin-right: 4px;
7726 }
7727
7728 /* Activity Patterns */
7729 .wpforo-ai-activity-patterns {
7730 display: flex;
7731 flex-wrap: wrap;
7732 gap: 12px;
7733 }
7734
7735 .wpforo-ai-pattern-item {
7736 display: flex;
7737 align-items: center;
7738 gap: 8px;
7739 padding: 8px 14px;
7740 background: #f9f9f9;
7741 border-radius: 6px;
7742 }
7743
7744 .wpforo-ai-pattern-label {
7745 font-size: 12px;
7746 color: #646970;
7747 }
7748
7749 .wpforo-ai-pattern-value {
7750 font-size: 13px;
7751 font-weight: 600;
7752 color: #1d2327;
7753 }
7754
7755 .wpforo-ai-pattern-value.trend-up {
7756 color: #4CAF50;
7757 }
7758
7759 .wpforo-ai-pattern-value.trend-down {
7760 color: #F44336;
7761 }
7762
7763 .wpforo-ai-pattern-value.trend-stable {
7764 color: #9E9E9E;
7765 }
7766
7767 /* Deep Analysis Overall Summary */
7768 .wpforo-ai-deep-overall-summary {
7769 grid-column: 1 / -1;
7770 padding: 16px 20px;
7771 background: linear-gradient(135deg, #e8f4ea 0%, #d4edda 100%);
7772 border-radius: 8px;
7773 border-left: 4px solid #28a745;
7774 }
7775
7776 .wpforo-ai-deep-overall-summary p {
7777 margin: 0;
7778 font-size: 14px;
7779 line-height: 1.6;
7780 color: #155724;
7781 }
7782
7783 /* ==========================================================================
7784 Sentiment Trend Results
7785 ========================================================================== */
7786
7787 .wpforo-ai-sentiment-trend-results {
7788 /* Container */
7789 }
7790
7791 .wpforo-ai-trend-overview {
7792 display: flex;
7793 flex-wrap: wrap;
7794 gap: 20px;
7795 margin-bottom: 24px;
7796 }
7797
7798 .wpforo-ai-trend-direction {
7799 display: flex;
7800 flex-direction: column;
7801 align-items: center;
7802 gap: 8px;
7803 padding: 20px 30px;
7804 background: #fff;
7805 border: 2px solid;
7806 border-radius: 12px;
7807 }
7808
7809 .wpforo-ai-trend-icon {
7810 display: flex;
7811 align-items: center;
7812 justify-content: center;
7813 }
7814
7815 .wpforo-ai-trend-icon svg {
7816 width: 40px;
7817 height: 40px;
7818 }
7819
7820 .wpforo-ai-trend-label {
7821 font-size: 18px;
7822 font-weight: 600;
7823 color: #1d2327;
7824 }
7825
7826 .wpforo-ai-trend-strength {
7827 display: flex;
7828 align-items: center;
7829 gap: 8px;
7830 width: 100%;
7831 margin-top: 8px;
7832 }
7833
7834 .wpforo-ai-strength-label {
7835 font-size: 11px;
7836 color: #646970;
7837 }
7838
7839 .wpforo-ai-strength-bar {
7840 flex: 1;
7841 height: 8px;
7842 background: #e0e0e0;
7843 border-radius: 4px;
7844 overflow: hidden;
7845 }
7846
7847 .wpforo-ai-strength-fill {
7848 height: 100%;
7849 border-radius: 4px;
7850 }
7851
7852 .wpforo-ai-strength-value {
7853 font-size: 12px;
7854 font-weight: 600;
7855 color: #1d2327;
7856 }
7857
7858 /* Peaks */
7859 .wpforo-ai-trend-peaks {
7860 flex: 1;
7861 display: flex;
7862 flex-direction: column;
7863 gap: 10px;
7864 }
7865
7866 .wpforo-ai-peak-item {
7867 display: flex;
7868 align-items: center;
7869 gap: 10px;
7870 padding: 10px 16px;
7871 background: #f9f9f9;
7872 border-radius: 8px;
7873 }
7874
7875 .wpforo-ai-peak-item.positive {
7876 background: #d4edda;
7877 }
7878
7879 .wpforo-ai-peak-item.negative {
7880 background: #f8d7da;
7881 }
7882
7883 .wpforo-ai-peak-item.active {
7884 background: #fff3cd;
7885 }
7886
7887 .wpforo-ai-peak-emoji {
7888 font-size: 20px;
7889 }
7890
7891 .wpforo-ai-peak-label {
7892 font-size: 12px;
7893 color: #646970;
7894 }
7895
7896 .wpforo-ai-peak-value {
7897 font-weight: 600;
7898 color: #1d2327;
7899 }
7900
7901 /* Time Series Chart */
7902 .wpforo-ai-trend-chart-container {
7903 margin-bottom: 24px;
7904 padding: 20px;
7905 background: #fff;
7906 border: 1px solid #e0e0e0;
7907 border-radius: 8px;
7908 }
7909
7910 .wpforo-ai-trend-chart-container h4 {
7911 margin: 0 0 16px 0;
7912 font-size: 14px;
7913 font-weight: 600;
7914 color: #1d2327;
7915 }
7916
7917 .wpforo-ai-chart-subtitle {
7918 font-size: 12px;
7919 font-weight: 400;
7920 color: #646970;
7921 }
7922
7923 .wpforo-ai-trend-chart {
7924 position: relative;
7925 height: 220px;
7926 padding: 0 10px 0 40px;
7927 }
7928
7929 /* Y-axis labels */
7930 .wpforo-ai-chart-y-axis {
7931 position: absolute;
7932 left: 0;
7933 top: 0;
7934 bottom: 30px;
7935 width: 35px;
7936 display: flex;
7937 flex-direction: column;
7938 justify-content: space-between;
7939 align-items: flex-end;
7940 padding-right: 8px;
7941 padding-top: 2px;
7942 padding-bottom: 2px;
7943 }
7944
7945 .wpforo-ai-chart-y-label {
7946 font-size: 10px;
7947 color: #50575e;
7948 font-weight: 500;
7949 line-height: 1;
7950 }
7951
7952 .wpforo-ai-chart-area {
7953 position: relative;
7954 height: 180px;
7955 margin-left: 5px;
7956 border-left: 2px solid #aaa;
7957 border-bottom: 2px solid #aaa;
7958 /* Grid lines - horizontal every 45px (180/4) */
7959 background:
7960 /* Horizontal grid lines */
7961 repeating-linear-gradient(
7962 to top,
7963 transparent,
7964 transparent 44px,
7965 #ddd 44px,
7966 #ddd 45px
7967 ),
7968 /* Light background */
7969 linear-gradient(to top, #fafafa, #fff);
7970 }
7971
7972 .wpforo-ai-chart-bars {
7973 display: flex;
7974 align-items: flex-end;
7975 justify-content: space-around;
7976 height: 100%;
7977 gap: 3px;
7978 padding: 0 8px;
7979 }
7980
7981 .wpforo-ai-chart-bar-wrapper {
7982 flex: 1;
7983 display: flex;
7984 flex-direction: column;
7985 align-items: center;
7986 justify-content: flex-end;
7987 height: 100%;
7988 min-width: 12px;
7989 max-width: 40px;
7990 cursor: pointer;
7991 position: relative;
7992 /* Vertical grid line */
7993 border-right: 1px dashed #e0e0e0;
7994 }
7995
7996 .wpforo-ai-chart-bar-wrapper:last-child {
7997 border-right: none;
7998 }
7999
8000 .wpforo-ai-chart-bar {
8001 width: 80%;
8002 min-height: 6px;
8003 border-radius: 3px 3px 0 0;
8004 transition: all 0.2s ease;
8005 position: relative;
8006 box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
8007 }
8008
8009 /* Show emoji on hover */
8010 .wpforo-ai-chart-bar-wrapper:hover .wpforo-ai-chart-bar::after {
8011 content: attr(data-emoji);
8012 position: absolute;
8013 top: -28px;
8014 left: 50%;
8015 transform: translateX(-50%);
8016 font-size: 18px;
8017 background: #fff;
8018 padding: 4px 8px;
8019 border-radius: 6px;
8020 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
8021 z-index: 10;
8022 border: 1px solid #e0e0e0;
8023 }
8024
8025 .wpforo-ai-chart-bar-wrapper:hover .wpforo-ai-chart-bar {
8026 opacity: 0.9;
8027 transform: scaleY(1.03);
8028 box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
8029 }
8030
8031 .wpforo-ai-chart-x-axis {
8032 display: flex;
8033 justify-content: space-around;
8034 gap: 3px;
8035 padding: 8px 8px 0 8px;
8036 margin-left: 5px;
8037 border-top: none;
8038 }
8039
8040 .wpforo-ai-chart-label {
8041 flex: 1;
8042 font-size: 10px;
8043 color: #50575e;
8044 text-align: center;
8045 min-width: 12px;
8046 overflow: hidden;
8047 text-overflow: ellipsis;
8048 font-weight: 500;
8049 }
8050
8051 .wpforo-ai-chart-legend {
8052 display: flex;
8053 flex-wrap: wrap;
8054 gap: 10px;
8055 margin-top: 16px;
8056 padding-top: 16px;
8057 border-top: 1px solid #f0f0f0;
8058 justify-content: center;
8059 }
8060
8061 .wpforo-ai-legend-item {
8062 display: inline-flex;
8063 align-items: center;
8064 gap: 4px;
8065 font-size: 11px;
8066 color: #646970;
8067 padding: 3px 8px;
8068 background: #f9f9f9;
8069 border-radius: 12px;
8070 }
8071
8072 .wpforo-ai-legend-color {
8073 width: 10px;
8074 height: 10px;
8075 border-radius: 3px;
8076 }
8077
8078 /* Mood Shifts */
8079 .wpforo-ai-mood-shifts {
8080 margin-bottom: 24px;
8081 }
8082
8083 .wpforo-ai-mood-shifts h4 {
8084 margin: 0 0 16px 0;
8085 font-size: 14px;
8086 font-weight: 600;
8087 color: #1d2327;
8088 }
8089
8090 .wpforo-ai-shifts-list {
8091 display: flex;
8092 flex-wrap: wrap;
8093 gap: 12px;
8094 }
8095
8096 .wpforo-ai-shift-item {
8097 flex: 1;
8098 min-width: 200px;
8099 padding: 14px;
8100 background: #f9f9f9;
8101 border-radius: 8px;
8102 border-left: 4px solid #9E9E9E;
8103 }
8104
8105 .wpforo-ai-shift-item.magnitude-minor {
8106 border-left-color: #9E9E9E;
8107 }
8108
8109 .wpforo-ai-shift-item.magnitude-moderate {
8110 border-left-color: #FF9800;
8111 }
8112
8113 .wpforo-ai-shift-item.magnitude-major {
8114 border-left-color: #F44336;
8115 }
8116
8117 .wpforo-ai-shift-header {
8118 display: flex;
8119 justify-content: space-between;
8120 align-items: center;
8121 margin-bottom: 8px;
8122 }
8123
8124 .wpforo-ai-shift-period {
8125 font-size: 12px;
8126 font-weight: 600;
8127 color: #1d2327;
8128 }
8129
8130 .wpforo-ai-shift-magnitude {
8131 font-size: 10px;
8132 padding: 2px 8px;
8133 border-radius: 10px;
8134 background: #e0e0e0;
8135 color: #646970;
8136 text-transform: uppercase;
8137 }
8138
8139 .wpforo-ai-shift-item.magnitude-major .wpforo-ai-shift-magnitude {
8140 background: #f8d7da;
8141 color: #721c24;
8142 }
8143
8144 .wpforo-ai-shift-transition {
8145 display: flex;
8146 align-items: center;
8147 gap: 8px;
8148 font-size: 14px;
8149 }
8150
8151 .wpforo-ai-shift-arrow {
8152 color: #646970;
8153 }
8154
8155 .wpforo-ai-shift-from {
8156 color: #646970;
8157 }
8158
8159 .wpforo-ai-shift-to {
8160 font-weight: 600;
8161 color: #1d2327;
8162 }
8163
8164 .wpforo-ai-shift-cause {
8165 margin: 8px 0 0 0;
8166 font-size: 12px;
8167 color: #50575e;
8168 line-height: 1.4;
8169 font-style: italic;
8170 }
8171
8172 /* Patterns */
8173 .wpforo-ai-trend-patterns {
8174 margin-bottom: 24px;
8175 padding: 16px 20px;
8176 background: #f0f6fc;
8177 border-radius: 8px;
8178 border: 1px solid #c3c4c7;
8179 }
8180
8181 .wpforo-ai-trend-patterns h4 {
8182 margin: 0 0 12px 0;
8183 font-size: 14px;
8184 font-weight: 600;
8185 color: #1d2327;
8186 }
8187
8188 .wpforo-ai-cyclical-badge {
8189 display: inline-block;
8190 padding: 4px 12px;
8191 margin-bottom: 12px;
8192 border-radius: 12px;
8193 background: #2271b1;
8194 color: #fff;
8195 font-size: 12px;
8196 font-weight: 500;
8197 }
8198
8199 .wpforo-ai-pattern-info p {
8200 margin: 0;
8201 font-size: 13px;
8202 color: #50575e;
8203 line-height: 1.5;
8204 }
8205
8206 /* Summary and Forecast */
8207 .wpforo-ai-trend-summary-section {
8208 display: grid;
8209 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
8210 gap: 16px;
8211 }
8212
8213 .wpforo-ai-trend-summary,
8214 .wpforo-ai-trend-forecast {
8215 padding: 16px 20px;
8216 border-radius: 8px;
8217 }
8218
8219 .wpforo-ai-trend-summary {
8220 background: #f9f9f9;
8221 border: 1px solid #e0e0e0;
8222 }
8223
8224 .wpforo-ai-trend-forecast {
8225 background: linear-gradient(135deg, #e8f4ea 0%, #d4edda 100%);
8226 border: 1px solid #c3e6cb;
8227 }
8228
8229 .wpforo-ai-trend-summary h4,
8230 .wpforo-ai-trend-forecast h4 {
8231 display: flex;
8232 align-items: center;
8233 gap: 8px;
8234 margin: 0 0 10px 0;
8235 font-size: 14px;
8236 font-weight: 600;
8237 color: #1d2327;
8238 }
8239
8240 .wpforo-ai-trend-forecast h4 .dashicons {
8241 color: #28a745;
8242 }
8243
8244 .wpforo-ai-trend-summary p,
8245 .wpforo-ai-trend-forecast p {
8246 margin: 0;
8247 font-size: 13px;
8248 line-height: 1.5;
8249 color: #50575e;
8250 }
8251
8252 .wpforo-ai-trend-forecast p {
8253 color: #155724;
8254 }
8255
8256 /* ==========================================================================
8257 7 Emotions Sentiment Layout
8258 ========================================================================== */
8259
8260 .wpforo-ai-sentiment-results-7 {
8261 /* More compact for 7 emotions */
8262 }
8263
8264 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bars {
8265 gap: 8px;
8266 }
8267
8268 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bar {
8269 grid-template-columns: 28px 80px 1fr 45px;
8270 gap: 8px;
8271 }
8272
8273 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-emoji {
8274 font-size: 18px;
8275 }
8276
8277 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-label {
8278 font-size: 12px;
8279 }
8280
8281 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-bar-track {
8282 height: 10px;
8283 }
8284
8285 .wpforo-ai-sentiment-results-7 .wpforo-ai-sentiment-percent {
8286 font-size: 13px;
8287 }
8288
8289 /* Responsive for new sections */
8290 @media (max-width: 1200px) {
8291 .wpforo-ai-deep-analysis-results {
8292 grid-template-columns: repeat(2, 1fr);
8293 }
8294 }
8295
8296 @media (max-width: 782px) {
8297 .wpforo-ai-deep-analysis-results {
8298 grid-template-columns: 1fr;
8299 }
8300
8301 .wpforo-ai-trend-overview {
8302 flex-direction: column;
8303 }
8304
8305 .wpforo-ai-trend-direction {
8306 width: 100%;
8307 }
8308
8309 .wpforo-ai-contributors-mood {
8310 flex-direction: column;
8311 align-items: flex-start;
8312 }
8313
8314 .wpforo-ai-mood-breakdown {
8315 width: 100%;
8316 }
8317
8318 .wpforo-ai-contributors-mood-grid {
8319 grid-template-columns: 1fr;
8320 gap: 12px;
8321 }
8322
8323 .wpforo-ai-mood-stat {
8324 flex-direction: row;
8325 justify-content: flex-start;
8326 padding: 12px 16px;
8327 gap: 12px;
8328 }
8329
8330 .wpforo-ai-mood-stat-icon {
8331 font-size: 24px;
8332 margin-bottom: 0;
8333 }
8334
8335 .wpforo-ai-mood-stat-info {
8336 text-align: left;
8337 margin-bottom: 0;
8338 flex-shrink: 0;
8339 min-width: 70px;
8340 }
8341
8342 .wpforo-ai-mood-stat-value {
8343 font-size: 18px;
8344 }
8345
8346 .wpforo-ai-mood-stat-bar {
8347 flex: 1;
8348 }
8349
8350 .wpforo-ai-chart-bars {
8351 height: 120px;
8352 }
8353
8354 .wpforo-ai-shift-item {
8355 min-width: 100%;
8356 }
8357
8358 .wpforo-ai-trend-summary-section {
8359 grid-template-columns: 1fr;
8360 }
8361 }
8362
8363 /* ==========================================================================
8364 AI Logs Tab
8365 ========================================================================== */
8366
8367 .wpforo-ai-logs-tab {
8368 margin: 0;
8369 }
8370
8371 /* Header Section */
8372 .wpforo-ai-logs-tab .wpforo-ai-logs-header-box {
8373 margin-bottom: 15px;
8374 }
8375
8376 .wpforo-ai-logs-tab .wpforo-ai-logs-header {
8377 display: flex;
8378 justify-content: space-between;
8379 align-items: flex-start;
8380 gap: 20px;
8381 }
8382
8383 .wpforo-ai-logs-tab .wpforo-ai-logs-info h2 {
8384 margin: 0 0 8px 0;
8385 font-size: 20px;
8386 font-weight: 600;
8387 display: flex;
8388 align-items: center;
8389 gap: 8px;
8390 }
8391
8392 .wpforo-ai-logs-tab .wpforo-ai-logs-info h2 .dashicons {
8393 color: #3b82f6;
8394 }
8395
8396 .wpforo-ai-logs-tab .wpforo-ai-logs-count {
8397 font-weight: 400;
8398 color: #64748b;
8399 font-size: 16px;
8400 }
8401
8402 .wpforo-ai-logs-tab .wpforo-ai-logs-info .wpforo-ai-description {
8403 margin: 0;
8404 color: #64748b;
8405 font-size: 14px;
8406 }
8407
8408 .wpforo-ai-logs-tab .wpforo-ai-logs-actions {
8409 flex-shrink: 0;
8410 }
8411
8412 /* Settings Section */
8413 .wpforo-ai-logs-tab .wpforo-ai-logs-settings-box {
8414 margin-top: 15px;
8415 }
8416
8417 .wpforo-ai-logs-tab .wpforo-ai-logs-settings {
8418 display: flex;
8419 flex-wrap: wrap;
8420 gap: 30px;
8421 }
8422
8423 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row {
8424 display: flex;
8425 align-items: center;
8426 gap: 10px;
8427 }
8428
8429 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row label {
8430 font-size: 13px;
8431 color: #374151;
8432 font-weight: 500;
8433 }
8434
8435 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row input[type="number"] {
8436 width: 70px;
8437 text-align: center;
8438 }
8439
8440 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row select {
8441 min-width: 80px;
8442 }
8443
8444 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-status {
8445 position: relative;
8446 display: inline-block;
8447 width: 20px;
8448 height: 20px;
8449 }
8450
8451 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-spinner {
8452 position: absolute;
8453 top: 0;
8454 left: 0;
8455 float: none;
8456 margin: 0;
8457 }
8458
8459 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved {
8460 position: absolute;
8461 top: 0;
8462 left: 0;
8463 color: #16a34a;
8464 display: none;
8465 }
8466
8467 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved.is-visible {
8468 display: inline-block;
8469 }
8470
8471 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-saved .dashicons {
8472 font-size: 18px;
8473 width: 18px;
8474 height: 18px;
8475 }
8476
8477 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-days {
8478 font-size: 13px;
8479 color: #374151;
8480 }
8481
8482 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-hint {
8483 font-size: 12px;
8484 color: #6b7280;
8485 font-style: italic;
8486 }
8487
8488 .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn {
8489 display: inline-flex;
8490 align-items: center;
8491 gap: 6px;
8492 color: #dc2626 !important;
8493 border-color: #fecaca !important;
8494 background: #fef2f2 !important;
8495 }
8496
8497 .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn:hover {
8498 background: #fee2e2 !important;
8499 border-color: #f87171 !important;
8500 }
8501
8502 .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn .dashicons {
8503 font-size: 16px;
8504 width: 16px;
8505 height: 16px;
8506 }
8507
8508 /* Filters Section */
8509 .wpforo-ai-logs-tab .wpforo-ai-logs-filters-box {
8510 margin-bottom: 15px;
8511 }
8512
8513 .wpforo-ai-logs-tab .wpforo-ai-logs-filters {
8514 display: flex;
8515 flex-wrap: wrap;
8516 align-items: flex-end;
8517 gap: 15px;
8518 }
8519
8520 .wpforo-ai-logs-tab .wpforo-ai-filter-group {
8521 display: flex;
8522 flex-direction: column;
8523 gap: 5px;
8524 }
8525
8526 .wpforo-ai-logs-tab .wpforo-ai-filter-group label {
8527 font-size: 12px;
8528 font-weight: 600;
8529 color: #374151;
8530 text-transform: uppercase;
8531 letter-spacing: 0.3px;
8532 }
8533
8534 .wpforo-ai-logs-tab .wpforo-ai-filter-group select,
8535 .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] {
8536 padding: 0 12px;
8537 border: 1px solid #d1d5db;
8538 border-radius: 4px;
8539 font-size: 13px;
8540 min-width: 140px;
8541 background-color: #fff;
8542 }
8543
8544 .wpforo-ai-logs-tab .wpforo-ai-filter-group select:focus,
8545 .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"]:focus {
8546 border-color: #3b82f6;
8547 outline: none;
8548 box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
8549 }
8550
8551 .wpforo-ai-logs-tab .wpforo-ai-filter-search input {
8552 min-width: 200px;
8553 }
8554
8555 .wpforo-ai-logs-tab .wpforo-ai-filter-button {
8556 flex-direction: row;
8557 gap: 8px;
8558 }
8559
8560 .wpforo-ai-logs-tab .wpforo-ai-filter-button .button {
8561 display: inline-flex;
8562 align-items: center;
8563 gap: 5px;
8564 }
8565
8566 .wpforo-ai-logs-tab .wpforo-ai-filter-button .button .dashicons {
8567 font-size: 14px;
8568 width: 14px;
8569 height: 14px;
8570 }
8571
8572 /* Table Section */
8573 .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header {
8574 display: flex;
8575 justify-content: space-between;
8576 align-items: center;
8577 }
8578
8579 .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header h3 {
8580 margin: 0;
8581 font-size: 15px;
8582 display: flex;
8583 align-items: center;
8584 gap: 8px;
8585 }
8586
8587 .wpforo-ai-logs-tab .wpforo-ai-logs-showing {
8588 font-weight: 400;
8589 color: #64748b;
8590 font-size: 13px;
8591 }
8592
8593 .wpforo-ai-logs-tab .wpforo-ai-logs-bulk-actions {
8594 display: flex;
8595 align-items: center;
8596 gap: 8px;
8597 }
8598
8599 .wpforo-ai-logs-tab .wpforo-ai-bulk-action-select {
8600 padding: 2px 10px;
8601 border: 1px solid #d1d5db;
8602 border-radius: 4px;
8603 font-size: 13px;
8604 }
8605
8606 /* Loading Indicator */
8607 .wpforo-ai-logs-tab .wpforo-ai-logs-loading {
8608 display: flex;
8609 align-items: center;
8610 justify-content: center;
8611 gap: 10px;
8612 padding: 40px 20px;
8613 color: #64748b;
8614 font-size: 14px;
8615 }
8616
8617 .wpforo-ai-logs-tab .wpforo-ai-logs-loading .spinner {
8618 float: none;
8619 margin: 0;
8620 }
8621
8622 /* Logs Table */
8623 .wpforo-ai-logs-tab .wpforo-ai-logs-table {
8624 margin-top: 0;
8625 }
8626
8627 .wpforo-ai-logs-tab .wpforo-ai-logs-table th.check-column,
8628 .wpforo-ai-logs-tab .wpforo-ai-logs-table td.check-column {
8629 padding: 10px 8px;
8630 width: 35px;
8631 }
8632
8633 .wpforo-ai-logs-tab .wpforo-ai-logs-table th {
8634 font-size: 12px;
8635 text-transform: uppercase;
8636 letter-spacing: 0.3px;
8637 color: #374151;
8638 }
8639
8640 .wpforo-ai-logs-tab .wpforo-ai-logs-table td {
8641 vertical-align: middle;
8642 }
8643
8644 /* Date/Time Column */
8645 .wpforo-ai-logs-tab .wpforo-ai-log-date {
8646 display: block;
8647 font-weight: 500;
8648 color: #1e293b;
8649 font-size: 13px;
8650 }
8651
8652 .wpforo-ai-logs-tab .wpforo-ai-log-time {
8653 display: block;
8654 font-size: 12px;
8655 color: #64748b;
8656 }
8657
8658 /* Action Type Badge */
8659 .wpforo-ai-logs-tab .wpforo-ai-log-action-badge {
8660 display: inline-block;
8661 padding: 4px 10px;
8662 border-radius: 4px;
8663 font-size: 11px;
8664 font-weight: 600;
8665 text-transform: uppercase;
8666 letter-spacing: 0.3px;
8667 background: #e5e7eb;
8668 color: #374151;
8669 }
8670
8671 /* Action-specific badge colors */
8672 .wpforo-ai-logs-tab .wpforo-ai-action-semantic_search {
8673 background: #dbeafe;
8674 color: #1e40af;
8675 }
8676
8677 .wpforo-ai-logs-tab .wpforo-ai-action-public_search {
8678 background: #e0e7ff;
8679 color: #3730a3;
8680 }
8681
8682 .wpforo-ai-logs-tab .wpforo-ai-action-translation {
8683 background: #fef3c7;
8684 color: #92400e;
8685 }
8686
8687 .wpforo-ai-logs-tab .wpforo-ai-action-topic_summary {
8688 background: #d1fae5;
8689 color: #065f46;
8690 }
8691
8692 .wpforo-ai-logs-tab .wpforo-ai-action-bot_reply {
8693 background: #fce7f3;
8694 color: #9d174d;
8695 }
8696
8697 .wpforo-ai-logs-tab .wpforo-ai-action-suggest_reply {
8698 background: #ede9fe;
8699 color: #5b21b6;
8700 }
8701
8702 .wpforo-ai-logs-tab .wpforo-ai-action-analytics_insights {
8703 background: #ffedd5;
8704 color: #9a3412;
8705 }
8706
8707 .wpforo-ai-logs-tab .wpforo-ai-action-content_indexing {
8708 background: #ccfbf1;
8709 color: #0f766e;
8710 }
8711
8712 .wpforo-ai-logs-tab .wpforo-ai-action-moderation {
8713 background: #fee2e2;
8714 color: #991b1b;
8715 }
8716
8717 .wpforo-ai-logs-tab .wpforo-ai-action-chatbot {
8718 background: #f3e8ff;
8719 color: #7c3aed;
8720 }
8721
8722 .wpforo-ai-logs-tab .wpforo-ai-action-task_execution {
8723 background: #e0f2fe;
8724 color: #0369a1;
8725 }
8726
8727 /* Chat Message Role Badges */
8728 .wpforo-ai-logs-tab .wpforo-ai-chat-role-user {
8729 background: #dbeafe;
8730 color: #1e40af;
8731 }
8732
8733 .wpforo-ai-logs-tab .wpforo-ai-chat-role-assistant {
8734 background: #f3e8ff;
8735 color: #7c3aed;
8736 }
8737
8738 /* Chat Messages Button Active State */
8739 .wpforo-ai-logs-tab #wpforo-ai-logs-chat-messages-btn.active {
8740 background: #7c3aed;
8741 border-color: #7c3aed;
8742 color: #ffffff;
8743 }
8744
8745 .wpforo-ai-logs-tab #wpforo-ai-logs-chat-messages-btn.active:hover {
8746 background: #6d28d9;
8747 border-color: #6d28d9;
8748 }
8749
8750 /* Chat Message Row Highlight */
8751 .wpforo-ai-logs-tab .wpforo-ai-chat-message-row td {
8752 background: #faf5ff;
8753 }
8754
8755 .wpforo-ai-logs-tab .wpforo-ai-chat-message-row:nth-child(even) td {
8756 background: #f5f3ff;
8757 }
8758
8759 /* Chat Message Content in Detail Modal */
8760 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content {
8761 background: #f8fafc;
8762 border: 1px solid #e2e8f0;
8763 border-radius: 6px;
8764 padding: 15px;
8765 max-height: 400px;
8766 overflow-y: auto;
8767 word-wrap: break-word;
8768 line-height: 1.6;
8769 }
8770
8771 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content p {
8772 margin: 0 0 1em 0;
8773 }
8774
8775 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content p:last-child {
8776 margin-bottom: 0;
8777 }
8778
8779 /* Post reference links */
8780 .wpforo-ai-log-detail-modal .wpforo-ai-post-link {
8781 background: #e0e7ff;
8782 color: #4338ca;
8783 padding: 2px 6px;
8784 border-radius: 4px;
8785 font-weight: 500;
8786 text-decoration: none;
8787 font-size: 12px;
8788 }
8789
8790 .wpforo-ai-log-detail-modal .wpforo-ai-post-link:hover {
8791 background: #c7d2fe;
8792 color: #3730a3;
8793 }
8794
8795 /* Sources list */
8796 .wpforo-ai-sources-list ul {
8797 margin: 0;
8798 padding: 0;
8799 list-style: none;
8800 }
8801
8802 .wpforo-ai-sources-list ul li {
8803 padding: 6px 0;
8804 border-bottom: 1px solid #e5e7eb;
8805 }
8806
8807 .wpforo-ai-sources-list ul li:last-child {
8808 border-bottom: none;
8809 }
8810
8811 .wpforo-ai-sources-list .wpforo-ai-source-link {
8812 color: #2563eb;
8813 text-decoration: none;
8814 font-weight: 500;
8815 }
8816
8817 .wpforo-ai-sources-list .wpforo-ai-source-link:hover {
8818 color: #1d4ed8;
8819 text-decoration: underline;
8820 }
8821
8822 /* Inline code */
8823 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content code {
8824 background: #e5e7eb;
8825 padding: 2px 6px;
8826 border-radius: 4px;
8827 font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
8828 font-size: 13px;
8829 color: #be185d;
8830 }
8831
8832 /* Code blocks */
8833 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content pre {
8834 background: #1e293b;
8835 color: #e2e8f0;
8836 padding: 12px 15px;
8837 border-radius: 6px;
8838 overflow-x: auto;
8839 margin: 10px 0;
8840 }
8841
8842 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content pre code {
8843 background: transparent;
8844 color: inherit;
8845 padding: 0;
8846 font-size: 13px;
8847 }
8848
8849 /* Blockquotes */
8850 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content blockquote {
8851 border-left: 4px solid #7c3aed;
8852 margin: 10px 0;
8853 padding: 10px 15px;
8854 background: #f5f3ff;
8855 color: #5b21b6;
8856 }
8857
8858 /* Lists */
8859 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content ul,
8860 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content ol {
8861 margin: 10px 0;
8862 padding-left: 25px;
8863 }
8864
8865 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content li {
8866 margin: 5px 0;
8867 }
8868
8869 /* Headers in message content */
8870 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h1,
8871 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h2,
8872 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h3,
8873 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h4,
8874 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h5,
8875 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h6 {
8876 margin: 15px 0 10px 0;
8877 font-weight: 600;
8878 color: #1e293b;
8879 }
8880
8881 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h1 { font-size: 1.5em; }
8882 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h2 { font-size: 1.3em; }
8883 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h3 { font-size: 1.15em; }
8884 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content h4 { font-size: 1em; }
8885
8886 /* Horizontal rule */
8887 .wpforo-ai-log-detail-modal .wpforo-ai-chat-message-content hr {
8888 border: none;
8889 border-top: 1px solid #e2e8f0;
8890 margin: 15px 0;
8891 }
8892
8893 /* User Column */
8894 .wpforo-ai-logs-tab .wpforo-ai-log-user {
8895 font-size: 13px;
8896 color: #374151;
8897 }
8898
8899 .wpforo-ai-logs-tab .wpforo-ai-user-type-cron {
8900 color: #0891b2;
8901 font-style: italic;
8902 }
8903
8904 .wpforo-ai-logs-tab .wpforo-ai-user-type-system {
8905 color: #7c3aed;
8906 font-style: italic;
8907 }
8908
8909 .wpforo-ai-logs-tab .wpforo-ai-user-type-guest {
8910 color: #64748b;
8911 font-style: italic;
8912 }
8913
8914 /* Credits Column */
8915 .wpforo-ai-logs-tab .wpforo-ai-log-credits {
8916 font-weight: 600;
8917 color: #059669;
8918 }
8919
8920 .wpforo-ai-logs-tab .wpforo-ai-log-credits-zero {
8921 color: #9ca3af;
8922 }
8923
8924 /* Status Badges - Extending existing styles */
8925 .wpforo-ai-logs-tab .wpforo-ai-log-status.status-cached {
8926 background: #e0f2fe;
8927 color: #0369a1;
8928 }
8929
8930 /* Summary Column */
8931 .wpforo-ai-logs-tab .wpforo-ai-log-summary {
8932 font-size: 13px;
8933 color: #475569;
8934 word-break: break-word;
8935 }
8936
8937 .wpforo-ai-logs-tab .wpforo-ai-log-error-summary {
8938 color: #dc2626;
8939 }
8940
8941 .wpforo-ai-logs-tab .wpforo-ai-log-duration {
8942 font-size: 11px;
8943 color: #94a3b8;
8944 margin-left: 5px;
8945 }
8946
8947 /* Action Buttons */
8948 .wpforo-ai-logs-tab .wpforo-ai-logs-table .column-actions {
8949 text-align: center;
8950 }
8951
8952 .wpforo-ai-logs-tab .wpforo-ai-log-view,
8953 .wpforo-ai-logs-tab .wpforo-ai-log-delete {
8954 padding: 3px 6px !important;
8955 min-height: auto !important;
8956 line-height: 1 !important;
8957 }
8958
8959 .wpforo-ai-logs-tab .wpforo-ai-log-view .dashicons,
8960 .wpforo-ai-logs-tab .wpforo-ai-log-delete .dashicons {
8961 font-size: 14px;
8962 width: 14px;
8963 height: 14px;
8964 line-height: 14px;
8965 }
8966
8967 .wpforo-ai-logs-tab .wpforo-ai-log-delete {
8968 color: #dc2626 !important;
8969 }
8970
8971 .wpforo-ai-logs-tab .wpforo-ai-log-delete:hover {
8972 background: #fee2e2 !important;
8973 border-color: #f87171 !important;
8974 }
8975
8976 /* Empty State */
8977 .wpforo-ai-logs-tab .wpforo-ai-logs-empty-row td {
8978 padding: 0 !important;
8979 }
8980
8981 .wpforo-ai-logs-tab .wpforo-ai-logs-empty {
8982 text-align: center;
8983 padding: 60px 20px;
8984 color: #64748b;
8985 }
8986
8987 .wpforo-ai-logs-tab .wpforo-ai-logs-empty .dashicons {
8988 font-size: 40px;
8989 width: auto;
8990 height: auto;
8991 color: #cbd5e1;
8992 margin-bottom: 15px;
8993 display: block;
8994 }
8995
8996 /* Pagination */
8997 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination {
8998 margin-top: 15px;
8999 padding-top: 15px;
9000 border-top: 1px solid #e5e7eb;
9001 }
9002
9003 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .tablenav-pages {
9004 display: flex;
9005 align-items: center;
9006 justify-content: flex-end;
9007 gap: 10px;
9008 }
9009
9010 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .displaying-num {
9011 color: #64748b;
9012 font-size: 13px;
9013 }
9014
9015 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .pagination-links {
9016 display: flex;
9017 align-items: center;
9018 gap: 4px;
9019 }
9020
9021 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .pagination-links .button {
9022 padding: 4px 8px;
9023 min-height: auto;
9024 line-height: 1.2;
9025 }
9026
9027 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .paging-input {
9028 font-size: 13px;
9029 color: #374151;
9030 margin: 0 8px;
9031 }
9032
9033 .wpforo-ai-logs-tab .wpforo-ai-logs-pagination .current-page {
9034 font-weight: 600;
9035 }
9036
9037 /* Log Detail Modal */
9038 .wpforo-ai-logs-tab .wpforo-ai-log-detail-overlay {
9039 position: fixed;
9040 top: 0;
9041 left: 0;
9042 right: 0;
9043 bottom: 0;
9044 background: rgba(0, 0, 0, 0.6);
9045 display: flex;
9046 align-items: center;
9047 justify-content: center;
9048 z-index: 100000;
9049 }
9050
9051 .wpforo-ai-logs-tab .wpforo-ai-log-detail-modal {
9052 background: #fff;
9053 border-radius: 8px;
9054 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
9055 max-width: 700px;
9056 width: 90%;
9057 max-height: 85vh;
9058 display: flex;
9059 flex-direction: column;
9060 }
9061
9062 .wpforo-ai-logs-tab .wpforo-ai-log-detail-header {
9063 display: flex;
9064 align-items: center;
9065 justify-content: space-between;
9066 padding: 16px 20px;
9067 border-bottom: 1px solid #e1e4e8;
9068 background: #f8f9fa;
9069 border-radius: 8px 8px 0 0;
9070 }
9071
9072 .wpforo-ai-logs-tab .wpforo-ai-log-detail-header h3 {
9073 margin: 0;
9074 font-size: 16px;
9075 font-weight: 600;
9076 color: #1e293b;
9077 display: flex;
9078 align-items: center;
9079 gap: 8px;
9080 }
9081
9082 .wpforo-ai-logs-tab .wpforo-ai-log-detail-header h3 .dashicons {
9083 color: #3b82f6;
9084 }
9085
9086 .wpforo-ai-logs-tab .wpforo-ai-log-detail-close {
9087 background: none;
9088 border: none;
9089 font-size: 20px;
9090 color: #64748b;
9091 cursor: pointer;
9092 padding: 4px;
9093 line-height: 1;
9094 transition: color 0.2s;
9095 border-radius: 4px;
9096 }
9097
9098 .wpforo-ai-logs-tab .wpforo-ai-log-detail-close:hover {
9099 color: #ef4444;
9100 background: #fee2e2;
9101 }
9102
9103 .wpforo-ai-logs-tab .wpforo-ai-log-detail-close .dashicons {
9104 font-size: 20px;
9105 width: 20px;
9106 height: 20px;
9107 }
9108
9109 .wpforo-ai-logs-tab .wpforo-ai-log-detail-body {
9110 padding: 20px;
9111 overflow-y: auto;
9112 }
9113
9114 /* Log Detail Content */
9115 .wpforo-ai-logs-tab .wpforo-ai-log-detail-grid {
9116 display: grid;
9117 grid-template-columns: repeat(2, 1fr);
9118 gap: 16px;
9119 margin-bottom: 20px;
9120 }
9121
9122 .wpforo-ai-logs-tab .wpforo-ai-log-detail-item {
9123 background: #f8fafc;
9124 border: 1px solid #e2e8f0;
9125 border-radius: 6px;
9126 padding: 12px 16px;
9127 }
9128
9129 .wpforo-ai-logs-tab .wpforo-ai-log-detail-item.full-width {
9130 grid-column: span 2;
9131 }
9132
9133 .wpforo-ai-logs-tab .wpforo-ai-log-detail-label {
9134 font-size: 11px;
9135 font-weight: 600;
9136 text-transform: uppercase;
9137 letter-spacing: 0.5px;
9138 color: #64748b;
9139 margin-bottom: 4px;
9140 }
9141
9142 .wpforo-ai-logs-tab .wpforo-ai-log-detail-value {
9143 font-size: 14px;
9144 color: #1e293b;
9145 word-break: break-word;
9146 }
9147
9148 .wpforo-ai-logs-tab .wpforo-ai-log-detail-value pre {
9149 background: #1e293b;
9150 color: #e2e8f0;
9151 padding: 12px;
9152 border-radius: 4px;
9153 font-size: 12px;
9154 overflow-x: auto;
9155 margin: 0;
9156 white-space: pre-wrap;
9157 }
9158
9159 .wpforo-ai-logs-tab .wpforo-ai-log-detail-error {
9160 background: #fef2f2;
9161 border-color: #fecaca;
9162 }
9163
9164 .wpforo-ai-logs-tab .wpforo-ai-log-detail-error .wpforo-ai-log-detail-value {
9165 color: #dc2626;
9166 }
9167
9168 /* Confirm Modal */
9169 .wpforo-ai-logs-tab .wpforo-ai-confirm-overlay {
9170 position: fixed;
9171 top: 0;
9172 left: 0;
9173 right: 0;
9174 bottom: 0;
9175 background: rgba(0, 0, 0, 0.6);
9176 display: flex;
9177 align-items: center;
9178 justify-content: center;
9179 z-index: 100001;
9180 }
9181
9182 .wpforo-ai-logs-tab .wpforo-ai-confirm-modal {
9183 background: #fff;
9184 border-radius: 8px;
9185 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
9186 max-width: 400px;
9187 width: 90%;
9188 }
9189
9190 .wpforo-ai-logs-tab .wpforo-ai-confirm-header {
9191 display: flex;
9192 align-items: center;
9193 gap: 10px;
9194 padding: 16px 20px;
9195 border-bottom: 1px solid #e1e4e8;
9196 font-size: 16px;
9197 font-weight: 600;
9198 color: #1e293b;
9199 }
9200
9201 .wpforo-ai-logs-tab .wpforo-ai-confirm-header .dashicons {
9202 color: #f59e0b;
9203 font-size: 24px;
9204 width: 24px;
9205 height: 24px;
9206 }
9207
9208 .wpforo-ai-logs-tab .wpforo-ai-confirm-body {
9209 padding: 20px;
9210 }
9211
9212 .wpforo-ai-logs-tab .wpforo-ai-confirm-body p {
9213 margin: 0;
9214 color: #475569;
9215 font-size: 14px;
9216 line-height: 1.6;
9217 }
9218
9219 .wpforo-ai-logs-tab .wpforo-ai-confirm-footer {
9220 padding: 16px 20px;
9221 border-top: 1px solid #e1e4e8;
9222 display: flex;
9223 justify-content: flex-end;
9224 gap: 10px;
9225 background: #f8f9fa;
9226 border-radius: 0 0 8px 8px;
9227 }
9228
9229 .wpforo-ai-logs-tab .wpforo-ai-btn-danger {
9230 background: #dc2626 !important;
9231 border-color: #dc2626 !important;
9232 color: #fff !important;
9233 }
9234
9235 .wpforo-ai-logs-tab .wpforo-ai-btn-danger:hover {
9236 background: #b91c1c !important;
9237 border-color: #b91c1c !important;
9238 }
9239
9240 /* Responsive - AI Logs */
9241 @media screen and (max-width: 1024px) {
9242 .wpforo-ai-logs-tab .wpforo-ai-logs-filters {
9243 gap: 12px;
9244 }
9245
9246 .wpforo-ai-logs-tab .wpforo-ai-filter-group select,
9247 .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] {
9248 min-width: 120px;
9249 }
9250
9251 .wpforo-ai-logs-tab .wpforo-ai-filter-search input {
9252 min-width: 160px;
9253 }
9254 }
9255
9256 @media screen and (max-width: 782px) {
9257 .wpforo-ai-logs-tab .wpforo-ai-logs-header {
9258 flex-direction: column;
9259 gap: 15px;
9260 }
9261
9262 .wpforo-ai-logs-tab .wpforo-ai-logs-actions {
9263 width: 100%;
9264 }
9265
9266 .wpforo-ai-logs-tab .wpforo-ai-empty-logs-btn {
9267 width: 100%;
9268 justify-content: center;
9269 }
9270
9271 .wpforo-ai-logs-tab .wpforo-ai-logs-settings {
9272 flex-direction: column;
9273 gap: 15px;
9274 }
9275
9276 .wpforo-ai-logs-tab .wpforo-ai-logs-setting-row {
9277 flex-wrap: wrap;
9278 }
9279
9280 .wpforo-ai-logs-tab .wpforo-ai-logs-filters {
9281 flex-direction: column;
9282 align-items: stretch;
9283 }
9284
9285 .wpforo-ai-logs-tab .wpforo-ai-filter-group {
9286 width: 100%;
9287 }
9288
9289 .wpforo-ai-logs-tab .wpforo-ai-filter-group select,
9290 .wpforo-ai-logs-tab .wpforo-ai-filter-group input[type="text"] {
9291 width: 100%;
9292 min-width: auto;
9293 }
9294
9295 .wpforo-ai-logs-tab .wpforo-ai-filter-button {
9296 flex-direction: row;
9297 justify-content: stretch;
9298 }
9299
9300 .wpforo-ai-logs-tab .wpforo-ai-filter-button .button {
9301 flex: 1;
9302 justify-content: center;
9303 }
9304
9305 .wpforo-ai-logs-tab .wpforo-ai-logs-table-box .wpforo-ai-box-header {
9306 flex-direction: column;
9307 align-items: flex-start;
9308 gap: 10px;
9309 }
9310
9311 .wpforo-ai-logs-tab .wpforo-ai-logs-bulk-actions {
9312 width: 100%;
9313 }
9314
9315 .wpforo-ai-logs-tab .wpforo-ai-bulk-action-select {
9316 flex: 1;
9317 }
9318
9319 .wpforo-ai-logs-tab .wpforo-ai-logs-table {
9320 display: block;
9321 overflow-x: auto;
9322 }
9323
9324 .wpforo-ai-logs-tab .wpforo-ai-log-detail-grid {
9325 grid-template-columns: 1fr;
9326 }
9327
9328 .wpforo-ai-logs-tab .wpforo-ai-log-detail-item.full-width {
9329 grid-column: span 1;
9330 }
9331 }
9332
9333 /* =========================================
9334 Legal Documents Modal Styles
9335 ========================================= */
9336
9337 .wpforo-ai-modal {
9338 position: fixed;
9339 top: 0;
9340 left: 0;
9341 right: 0;
9342 bottom: 0;
9343 z-index: 100100;
9344 display: flex;
9345 align-items: center;
9346 justify-content: center;
9347 }
9348
9349 .wpforo-ai-modal-overlay {
9350 position: absolute;
9351 top: 0;
9352 left: 0;
9353 right: 0;
9354 bottom: 0;
9355 background: rgba(0, 0, 0, 0.7);
9356 }
9357
9358 .wpforo-ai-modal-container {
9359 position: relative;
9360 background: #fff;
9361 border-radius: 8px;
9362 box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
9363 max-width: 900px;
9364 width: 90%;
9365 max-height: 85vh;
9366 display: flex;
9367 flex-direction: column;
9368 animation: wpforo-ai-modal-appear 0.2s ease-out;
9369 }
9370
9371 @keyframes wpforo-ai-modal-appear {
9372 from {
9373 opacity: 0;
9374 transform: scale(0.95) translateY(-20px);
9375 }
9376 to {
9377 opacity: 1;
9378 transform: scale(1) translateY(0);
9379 }
9380 }
9381
9382 .wpforo-ai-modal-header {
9383 display: flex;
9384 align-items: center;
9385 justify-content: space-between;
9386 padding: 20px 25px;
9387 border-bottom: 1px solid #ddd;
9388 background: #f8f9fa;
9389 border-radius: 8px 8px 0 0;
9390 }
9391
9392 .wpforo-ai-modal-header h2 {
9393 margin: 0;
9394 font-size: 20px;
9395 font-weight: 600;
9396 color: #1d2327;
9397 }
9398
9399 .wpforo-ai-modal-close {
9400 background: transparent;
9401 border: none;
9402 cursor: pointer;
9403 padding: 5px;
9404 color: #666;
9405 transition: color 0.2s;
9406 }
9407
9408 .wpforo-ai-modal-close:hover {
9409 color: #d63638;
9410 }
9411
9412 .wpforo-ai-modal-close .dashicons {
9413 font-size: 24px;
9414 width: 24px;
9415 height: 24px;
9416 }
9417
9418 .wpforo-ai-modal-body {
9419 flex: 1;
9420 overflow-y: auto;
9421 padding: 25px;
9422 }
9423
9424 .wpforo-ai-modal-footer {
9425 padding: 15px 25px;
9426 border-top: 1px solid #ddd;
9427 background: #f8f9fa;
9428 border-radius: 0 0 8px 8px;
9429 text-align: right;
9430 }
9431
9432 /* Legal Document Content Styles */
9433 .wpforo-ai-legal-document {
9434 font-size: 14px;
9435 line-height: 1.7;
9436 color: #1d2327;
9437 }
9438
9439 .wpforo-ai-legal-document h1 {
9440 font-size: 24px;
9441 margin-bottom: 10px;
9442 color: #1d2327;
9443 border-bottom: 2px solid #2271b1;
9444 padding-bottom: 15px;
9445 }
9446
9447 .wpforo-ai-legal-document h2 {
9448 font-size: 18px;
9449 margin-top: 30px;
9450 margin-bottom: 15px;
9451 color: #1d2327;
9452 padding-bottom: 8px;
9453 border-bottom: 1px solid #eee;
9454 }
9455
9456 .wpforo-ai-legal-document h3 {
9457 font-size: 16px;
9458 margin-top: 20px;
9459 margin-bottom: 10px;
9460 color: #2c3338;
9461 }
9462
9463 .wpforo-ai-legal-document h4 {
9464 font-size: 14px;
9465 margin-top: 15px;
9466 margin-bottom: 8px;
9467 color: #2c3338;
9468 font-weight: 600;
9469 }
9470
9471 .wpforo-ai-legal-document p {
9472 margin-bottom: 15px;
9473 }
9474
9475 .wpforo-ai-legal-document ul,
9476 .wpforo-ai-legal-document ol {
9477 margin-bottom: 15px;
9478 padding-left: 25px;
9479 }
9480
9481 .wpforo-ai-legal-document li {
9482 margin-bottom: 8px;
9483 list-style: disc;
9484 }
9485
9486 .wpforo-ai-legal-document a {
9487 color: #2271b1;
9488 text-decoration: none;
9489 }
9490
9491 .wpforo-ai-legal-document a:hover {
9492 text-decoration: underline;
9493 }
9494
9495 .wpforo-ai-legal-updated {
9496 color: #666;
9497 font-size: 13px;
9498 margin-bottom: 5px !important;
9499 }
9500
9501 .wpforo-ai-legal-toc {
9502 background: #f8f9fa;
9503 padding: 20px;
9504 border-radius: 6px;
9505 margin: 20px 0;
9506 }
9507
9508 .wpforo-ai-legal-toc h3 {
9509 margin-top: 0;
9510 margin-bottom: 15px;
9511 font-size: 15px;
9512 }
9513
9514 .wpforo-ai-legal-toc ol {
9515 margin-bottom: 0;
9516 columns: 2;
9517 column-gap: 30px;
9518 }
9519
9520 .wpforo-ai-legal-toc li {
9521 margin-bottom: 5px;
9522 font-size: 13px;
9523 }
9524
9525 .wpforo-ai-legal-table {
9526 width: 100%;
9527 border-collapse: collapse;
9528 margin: 15px 0;
9529 font-size: 13px;
9530 }
9531
9532 .wpforo-ai-legal-table th,
9533 .wpforo-ai-legal-table td {
9534 border: 1px solid #ddd;
9535 padding: 10px 12px;
9536 text-align: left;
9537 }
9538
9539 .wpforo-ai-legal-table th {
9540 background: #f8f9fa;
9541 font-weight: 600;
9542 }
9543
9544 .wpforo-ai-legal-table tr:nth-child(even) {
9545 background: #fafafa;
9546 }
9547
9548 .wpforo-ai-legal-footer {
9549 margin-top: 30px;
9550 padding-top: 20px;
9551 border-top: 1px solid #ddd;
9552 color: #666;
9553 font-size: 13px;
9554 }
9555
9556 /* Terms Agreement Link Styles */
9557 .wpforo-ai-terms-agreement .wpforo-ai-legal-link {
9558 color: #2271b1;
9559 text-decoration: underline;
9560 cursor: pointer;
9561 }
9562
9563 .wpforo-ai-terms-agreement .wpforo-ai-legal-link:hover {
9564 color: #135e96;
9565 }
9566
9567 /* Loading State for Modal */
9568 .wpforo-ai-modal-loading {
9569 display: flex;
9570 align-items: center;
9571 justify-content: center;
9572 padding: 50px;
9573 color: #666;
9574 }
9575
9576 .wpforo-ai-modal-loading::before {
9577 content: "";
9578 width: 30px;
9579 height: 30px;
9580 border: 3px solid #ddd;
9581 border-top-color: #2271b1;
9582 border-radius: 50%;
9583 animation: wpforo-ai-spin 0.8s linear infinite;
9584 margin-right: 15px;
9585 }
9586
9587 .button.button-secondary.wpf-manage-subscription.wpf-provider-freemius{
9588 background: #6754ca; color: #fff; border-color: #4637da;
9589 }
9590 .button.button-secondary.wpf-manage-subscription.wpf-provider-freemius:hover{
9591 background: #7863ea; color: #fff; border-color: #4637da; box-shadow: 2px 1px 5px #b7b7b7;
9592 }
9593 .button.button-secondary.wpf-manage-subscription.wpf-provider-paddle{
9594 background: #429e66; color: #fff; border-color: #1b974b;
9595 }
9596 .button.button-secondary.wpf-manage-subscription.wpf-provider-paddle:hover{
9597 background: #4eb876; color: #fff; border-color: #1b974b; box-shadow: 2px 1px 5px #b7b7b7;
9598 }
9599
9600 @keyframes wpforo-ai-spin {
9601 to {
9602 transform: rotate(360deg);
9603 }
9604 }
9605
9606 /* Mobile Responsiveness for Modal */
9607 @media (max-width: 782px) {
9608 .wpforo-ai-modal-container {
9609 width: 95%;
9610 max-height: 90vh;
9611 margin: 10px;
9612 }
9613
9614 .wpforo-ai-modal-header {
9615 padding: 15px 20px;
9616 }
9617
9618 .wpforo-ai-modal-body {
9619 padding: 20px;
9620 }
9621
9622 .wpforo-ai-legal-toc ol {
9623 columns: 1;
9624 }
9625
9626 .wpforo-ai-legal-table {
9627 font-size: 12px;
9628 }
9629
9630 .wpforo-ai-legal-table th,
9631 .wpforo-ai-legal-table td {
9632 padding: 8px;
9633 }
9634 }
9635