PluginProbe
wpForo Forum / 3.0.2
wpForo Forum v3.0.2
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.0.2, at admin/assets/css/ai-features.css

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