PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 2.4.6
MxChat – AI Chatbot & Content Generation for WordPress v2.4.6
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | css/knowledge-style.css +12 -1510 3.2.142.4.6 View file →
@@ -266,19 +266,8 @@
266 266 border: 1px solid #e5e5e5;
267 267 text-align: center;
268 268 }
269 269
270 -/* YouTube import: multi-line radio/description stack reads left-aligned,
271 - unlike the single-row URL forms the centered default was made for. */
272 -#mxchat-youtube-input-area {
273 - text-align: left;
274 -}
275 -
276 -/* PDF Upload Area */
277 -#mxchat-pdf-upload-area input[type="file"] {
278 - margin-bottom: 12px;
279 -}
280 -
281 270 .mxchat-url-input-group {
282 271 display: flex;
283 272 gap: 12px;
284 273 max-width: 800px;
@@ -671,9 +660,9 @@
671 660 }
672 661
673 662 /* ===== Search ===== */
674 663 .mxchat-search-form {
675 - display: flex;
664 + position: relative;
676 665 }
677 666
678 667 .mxchat-search-group {
679 668 position: relative;
@@ -691,42 +680,8 @@
691 680 padding-left: 40px;
692 681 width: 300px;
693 682 }
694 683
695 -/* ADDED 2.5.6: Content Type Filter Styles */
696 -.mxchat-filter-group {
697 - position: relative;
698 - display: flex;
699 - align-items: center;
700 - margin-left: 12px;
701 -}
702 -
703 -.mxchat-filter-group select {
704 - padding: 8px 32px 8px 12px;
705 - border: 1px solid #ddd;
706 - border-radius: 8px;
707 - background: white;
708 - color: #333;
709 - font-size: 14px;
710 - cursor: pointer;
711 - transition: all 0.2s ease;
712 - appearance: none;
713 - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
714 - background-repeat: no-repeat;
715 - background-position: right 12px center;
716 -}
717 -
718 -.mxchat-filter-group select:hover {
719 - border-color: #7873f5;
720 - box-shadow: 0 2px 8px rgba(120, 115, 245, 0.1);
721 -}
722 -
723 -.mxchat-filter-group select:focus {
724 - outline: none;
725 - border-color: #7873f5;
726 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
727 -}
728 -
729 684 /* ===== Buttons ===== */
730 685 .mxchat-button-primary {
731 686 background: linear-gradient(135deg, #fa73e6, #7873f5);
732 687 border: none;
@@ -896,14 +851,8 @@
896 851 text-align: left;
897 852 border-bottom: 2px solid rgba(120, 115, 245, 0.1);
898 853 }
899 854
900 -/* Hide ID column (now second column, after checkbox column) */
901 -.mxchat-records-table th:nth-child(2),
902 -.mxchat-records-table td:nth-child(2) {
903 - display: none;
904 -}
905 -
906 855 .mxchat-records-table td {
907 856 padding: 15px;
908 857 border-top: 1px solid rgba(120, 115, 245, 0.1);
909 858 vertical-align: top;
@@ -913,110 +862,11 @@
913 862 background: rgba(120, 115, 245, 0.03);
914 863 }
915 864
916 865 .mxchat-content-cell {
917 - max-width: 600px;
866 + max-width: 400px;
918 867 }
919 868
920 -/* ===== Accordion Styles ===== */
921 -.mxchat-accordion-wrapper {
922 - width: 100%;
923 -}
924 -
925 -.mxchat-content-preview {
926 - display: flex;
927 - align-items: center;
928 - gap: 12px;
929 - padding: 8px 12px;
930 - border-radius: 6px;
931 - transition: all 0.2s ease;
932 -}
933 -
934 -/* Only make it look clickable if there's an expand button */
935 -.mxchat-content-preview:has(.mxchat-expand-toggle) {
936 - cursor: pointer;
937 -}
938 -
939 -.mxchat-content-preview:has(.mxchat-expand-toggle):hover {
940 - background: rgba(120, 115, 245, 0.04);
941 -}
942 -
943 -.mxchat-content-preview .preview-text {
944 - flex: 1;
945 - font-size: 14px;
946 - line-height: 1.6;
947 - color: #333;
948 - overflow: hidden;
949 -}
950 -
951 -.mxchat-expand-toggle {
952 - flex-shrink: 0;
953 - width: 28px;
954 - height: 28px;
955 - border: none;
956 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.1), rgba(120, 115, 245, 0.1));
957 - border-radius: 6px;
958 - cursor: pointer;
959 - display: inline-flex;
960 - align-items: center;
961 - justify-content: center;
962 - transition: all 0.3s ease;
963 - padding: 0;
964 -}
965 -
966 -.mxchat-expand-toggle:hover {
967 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.2), rgba(120, 115, 245, 0.2));
968 - transform: scale(1.05);
969 -}
970 -
971 -.mxchat-expand-toggle .dashicons {
972 - font-size: 18px;
973 - width: 18px;
974 - height: 18px;
975 - color: #7873f5;
976 - transition: transform 0.3s ease;
977 -}
978 -
979 -.mxchat-expand-toggle.expanded .dashicons {
980 - transform: rotate(180deg);
981 -}
982 -
983 -.mxchat-content-full {
984 - margin-top: 12px;
985 - padding: 16px;
986 - background: rgba(120, 115, 245, 0.03);
987 - border-radius: 8px;
988 - border-left: 3px solid #7873f5;
989 - animation: slideDown 0.3s ease;
990 -}
991 -
992 -@keyframes slideDown {
993 - from {
994 - opacity: 0;
995 - max-height: 0;
996 - transform: translateY(-10px);
997 - }
998 - to {
999 - opacity: 1;
1000 - max-height: 1000px;
1001 - transform: translateY(0);
1002 - }
1003 -}
1004 -
1005 -.mxchat-content-full .content-view {
1006 - font-size: 14px;
1007 - line-height: 1.6;
1008 - color: #333;
1009 -}
1010 -
1011 -.mxchat-content-full .content-view p {
1012 - margin: 0 0 12px 0;
1013 -}
1014 -
1015 -.mxchat-content-full .content-view p:last-child {
1016 - margin-bottom: 0;
1017 -}
1018 -
1019 869 .mxchat-url-cell a {
1020 870 color: #7873f5;
1021 871 text-decoration: none;
1022 872 display: flex;
@@ -1033,9 +883,13 @@
1033 883 display: flex;
1034 884 gap: 8px;
1035 885 }
1036 886
1037 -/* Legacy content-view styling (now within accordion) */
887 +.content-view {
888 + font-size: 14px;
889 + line-height: 1.5;
890 +}
891 +
1038 892 .content-edit {
1039 893 width: 100%;
1040 894 min-height: 100px;
1041 895 border: 1px solid #ddd;
@@ -1556,28 +1410,14 @@
1556 1410 .mxchat-kb-modal-footer {
1557 1411 padding: 15px 20px;
1558 1412 border-top: 1px solid #e5e5e5;
1559 1413 display: flex;
1560 - justify-content: space-between;
1561 - align-items: center;
1562 - gap: 15px;
1414 + justify-content: flex-end;
1415 + gap: 10px;
1563 1416 background-color: #f8f9fa;
1564 1417 border-radius: 0 0 8px 8px;
1565 1418 }
1566 1419
1567 -.mxchat-kb-modal-footer .mxchat-kb-pagination {
1568 - flex: 1;
1569 - margin: 0;
1570 - padding: 0;
1571 - text-align: left;
1572 -}
1573 -
1574 -.mxchat-kb-footer-actions {
1575 - display: flex;
1576 - gap: 10px;
1577 - flex-shrink: 0;
1578 -}
1579 -
1580 1420 .mxchat-kb-button-primary,
1581 1421 .mxchat-kb-button-secondary {
1582 1422 padding: 8px 15px;
1583 1423 border-radius: 4px;
@@ -1827,19 +1667,9 @@
1827 1667
1828 1668 .mxchat-search-group input {
1829 1669 width: 100%;
1830 1670 }
1831 -
1832 - /* ADDED 2.5.6: Responsive filter dropdown */
1833 - .mxchat-filter-group {
1834 - margin-left: 0;
1835 - width: 100%;
1836 - }
1837 -
1838 - .mxchat-filter-group select {
1839 - width: 100%;
1840 - }
1841 -
1671 +
1842 1672 .mxchat-url-input-group {
1843 1673 flex-direction: column;
1844 1674 }
1845 1675
@@ -1883,22 +1713,11 @@
1883 1713 }
1884 1714
1885 1715 .mxchat-kb-modal-footer {
1886 1716 flex-direction: column;
1887 - gap: 10px;
1888 1717 }
1889 -
1890 - .mxchat-kb-modal-footer .mxchat-kb-pagination {
1891 - width: 100%;
1892 - text-align: center;
1893 - }
1894 -
1895 - .mxchat-kb-footer-actions {
1896 - width: 100%;
1897 - flex-direction: column;
1898 - }
1899 -
1900 - .mxchat-kb-button-primary,
1718 +
1719 + .mxchat-kb-button-primary,
1901 1720 .mxchat-kb-button-secondary {
1902 1721 width: 100%;
1903 1722 }
1904 1723
@@ -2679,1321 +2498,4 @@
2679 2498 margin-bottom: 0;
2680 2499 color: #666;
2681 2500 }
2682 2501
2683 -
2684 -
2685 -/* ===== Role-Based Content Restrictions Styles ===== */
2686 -
2687 -/* Role mapping form */
2688 -.mxchat-role-mapping-form {
2689 - margin-top: 20px;
2690 - padding: 20px;
2691 - background-color: #f8f9ff;
2692 - border-radius: 8px;
2693 - border: 1px solid rgba(120, 115, 245, 0.1);
2694 -}
2695 -
2696 -.mxchat-role-mapping-form h4 {
2697 - margin-top: 0;
2698 - margin-bottom: 15px;
2699 - font-size: 16px;
2700 - color: #333;
2701 -}
2702 -
2703 -.mxchat-form-row {
2704 - display: flex;
2705 - gap: 15px;
2706 - align-items: flex-end;
2707 - margin-bottom: 20px;
2708 -}
2709 -
2710 -/* Role mappings table */
2711 -.mxchat-mappings-table {
2712 - width: 100%;
2713 - border-collapse: collapse;
2714 - margin-top: 15px;
2715 - background: #fff;
2716 - box-shadow: 0 1px 3px rgba(120, 115, 245, 0.08);
2717 - border-radius: 8px;
2718 - overflow: hidden;
2719 -}
2720 -
2721 -.mxchat-mappings-table th,
2722 -.mxchat-mappings-table td {
2723 - padding: 15px;
2724 - text-align: left;
2725 - border-bottom: 1px solid rgba(120, 115, 245, 0.1);
2726 -}
2727 -
2728 -.mxchat-mappings-table th {
2729 - background: #f8f9ff;
2730 - font-weight: 600;
2731 - color: #333;
2732 - font-size: 14px;
2733 -}
2734 -
2735 -.mxchat-mappings-table tbody tr {
2736 - transition: background-color 0.2s ease;
2737 -}
2738 -
2739 -.mxchat-mappings-table tbody tr:hover {
2740 - background: rgba(120, 115, 245, 0.03);
2741 -}
2742 -
2743 -.mxchat-mappings-table tbody tr:last-child td {
2744 - border-bottom: none;
2745 -}
2746 -
2747 -/* Tag and role badges */
2748 -.mxchat-tag-badge {
2749 - display: inline-flex;
2750 - align-items: center;
2751 - gap: 5px;
2752 - padding: 5px 12px;
2753 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2754 - color: #fff;
2755 - border-radius: 4px;
2756 - font-size: 13px;
2757 - font-weight: 500;
2758 -}
2759 -
2760 -.mxchat-tag-badge .dashicons {
2761 - font-size: 16px;
2762 - width: 16px;
2763 - height: 16px;
2764 -}
2765 -
2766 -.mxchat-role-badge {
2767 - display: inline-block;
2768 - padding: 5px 12px;
2769 - background: #f0f0f1;
2770 - color: #2c3338;
2771 - border-radius: 4px;
2772 - font-size: 13px;
2773 - font-weight: 500;
2774 -}
2775 -
2776 -/* Role-specific badge colors */
2777 -.mxchat-role-badge.public {
2778 - background: #e8f5e9;
2779 - color: #2e7d32;
2780 -}
2781 -
2782 -.mxchat-role-badge.logged_in {
2783 - background: #e3f2fd;
2784 - color: #1565c0;
2785 -}
2786 -
2787 -.mxchat-role-badge.subscriber {
2788 - background: #f3e5f5;
2789 - color: #7b1fa2;
2790 -}
2791 -
2792 -.mxchat-role-badge.contributor {
2793 - background: #fff3e0;
2794 - color: #e65100;
2795 -}
2796 -
2797 -.mxchat-role-badge.author {
2798 - background: #fff9c4;
2799 - color: #f57f17;
2800 -}
2801 -
2802 -.mxchat-role-badge.editor {
2803 - background: #fce4ec;
2804 - color: #c2185b;
2805 -}
2806 -
2807 -.mxchat-role-badge.administrator {
2808 - background: #ffebee;
2809 - color: #c62828;
2810 -}
2811 -
2812 -/* Mapping actions */
2813 -.mxchat-mapping-actions {
2814 - display: flex;
2815 - gap: 8px;
2816 - align-items: center;
2817 -}
2818 -
2819 -.mxchat-delete-mapping {
2820 - color: #d63638;
2821 - cursor: pointer;
2822 - padding: 6px 10px;
2823 - border-radius: 4px;
2824 - transition: all 0.2s ease;
2825 - display: inline-flex;
2826 - align-items: center;
2827 - gap: 4px;
2828 - background: transparent;
2829 - border: none;
2830 - font-size: 13px;
2831 -}
2832 -
2833 -.mxchat-delete-mapping:hover {
2834 - background: #fef0f0;
2835 - color: #b32d2e;
2836 -}
2837 -
2838 -.mxchat-delete-mapping .dashicons {
2839 - font-size: 18px;
2840 - width: 18px;
2841 - height: 18px;
2842 -}
2843 -
2844 -/* Post count display */
2845 -.mxchat-post-count {
2846 - color: #666;
2847 - font-size: 13px;
2848 - display: flex;
2849 - align-items: center;
2850 - gap: 4px;
2851 -}
2852 -
2853 -.mxchat-post-count .dashicons {
2854 - font-size: 16px;
2855 - width: 16px;
2856 - height: 16px;
2857 - color: #7873f5;
2858 -}
2859 -
2860 -/* Loading state for mappings */
2861 -.mxchat-loading-mappings {
2862 - text-align: center;
2863 - padding: 40px;
2864 - color: #666;
2865 -}
2866 -
2867 -.mxchat-role-spinner {
2868 - display: inline-block;
2869 - width: 20px;
2870 - height: 20px;
2871 - border: 2px solid rgba(120, 115, 245, 0.2);
2872 - border-top: 2px solid #7873f5;
2873 - border-radius: 50%;
2874 - animation: mxchat-role-spin 1s linear infinite;
2875 - margin-right: 10px;
2876 -}
2877 -
2878 -.mxchat-role-spinner.is-active {
2879 - display: inline-block;
2880 -}
2881 -
2882 -@keyframes mxchat-role-spin {
2883 - 0% { transform: rotate(0deg); }
2884 - 100% { transform: rotate(360deg); }
2885 -}
2886 -
2887 -/* Empty state */
2888 -#mxchat-no-mappings {
2889 - text-align: center;
2890 - padding: 40px;
2891 - color: #666;
2892 -}
2893 -
2894 -#mxchat-no-mappings .dashicons {
2895 - font-size: 48px;
2896 - opacity: 0.3;
2897 - margin-bottom: 15px;
2898 - display: block;
2899 -}
2900 -
2901 -#mxchat-no-mappings p {
2902 - margin: 0;
2903 - font-size: 14px;
2904 -}
2905 -
2906 -/* Bulk update section */
2907 -.mxchat-bulk-update-section {
2908 - margin-top: 30px;
2909 - padding-top: 30px;
2910 - border-top: 1px solid rgba(120, 115, 245, 0.1);
2911 -}
2912 -
2913 -.mxchat-bulk-update-section h4 {
2914 - margin-top: 0;
2915 - margin-bottom: 10px;
2916 - font-size: 16px;
2917 - color: #333;
2918 -}
2919 -
2920 -.mxchat-bulk-update-controls {
2921 - margin-top: 15px;
2922 -}
2923 -
2924 -#mxchat-bulk-update-roles {
2925 - display: inline-flex;
2926 - align-items: center;
2927 - gap: 8px;
2928 -}
2929 -
2930 -#mxchat-bulk-update-progress {
2931 - max-width: 600px;
2932 -}
2933 -
2934 -#mxchat-bulk-update-progress .mxchat-progress-bar {
2935 - height: 10px;
2936 - background: rgba(120, 115, 245, 0.1);
2937 - border-radius: 5px;
2938 - overflow: hidden;
2939 -}
2940 -
2941 -#mxchat-bulk-update-progress .mxchat-progress-fill {
2942 - height: 100%;
2943 - background: linear-gradient(135deg, #fa73e6, #7873f5);
2944 - transition: width 0.3s ease;
2945 -}
2946 -
2947 -.mxchat-progress-text {
2948 - margin-top: 10px;
2949 - color: #666;
2950 - font-size: 14px;
2951 -}
2952 -
2953 -/* Bulk update results */
2954 -#mxchat-bulk-update-result {
2955 - margin-top: 15px;
2956 - padding: 15px;
2957 - border-radius: 8px;
2958 -}
2959 -
2960 -#mxchat-bulk-update-result.success {
2961 - background-color: #f0f9eb;
2962 - border-left: 4px solid #67c23a;
2963 - color: #3c763d;
2964 -}
2965 -
2966 -#mxchat-bulk-update-result.error {
2967 - background-color: #fef0f0;
2968 - border-left: 4px solid #d63638;
2969 - color: #a94442;
2970 -}
2971 -
2972 -#mxchat-bulk-update-result h5 {
2973 - margin: 0 0 10px;
2974 - font-size: 15px;
2975 - font-weight: 600;
2976 -}
2977 -
2978 -#mxchat-bulk-update-result p {
2979 - margin: 5px 0;
2980 - font-size: 14px;
2981 -}
2982 -
2983 -/* Role mappings list container */
2984 -.mxchat-role-mappings-list {
2985 - margin-top: 25px;
2986 -}
2987 -
2988 -.mxchat-role-mappings-list h4 {
2989 - margin-top: 0;
2990 - margin-bottom: 15px;
2991 - font-size: 16px;
2992 - color: #333;
2993 -}
2994 -
2995 -/* Info banner styling (reuse existing pattern) */
2996 -.mxchat-role-info-banner {
2997 - display: flex;
2998 - align-items: center;
2999 - gap: 10px;
3000 - padding: 12px 16px;
3001 - margin-bottom: 20px;
3002 - border-radius: 6px;
3003 - font-size: 14px;
3004 - background: #f8f9ff;
3005 - border-left: 4px solid #7873f5;
3006 - color: #333;
3007 -}
3008 -
3009 -.mxchat-role-info-banner .dashicons {
3010 - color: #7873f5;
3011 - font-size: 18px;
3012 -}
3013 -
3014 -/* Responsive adjustments */
3015 -@media screen and (max-width: 782px) {
3016 - .mxchat-form-row {
3017 - flex-direction: column;
3018 - align-items: stretch;
3019 - }
3020 -
3021 - .mxchat-form-row .mxchat-form-group {
3022 - flex: 1;
3023 - max-width: none;
3024 - }
3025 -
3026 - .mxchat-form-row > div {
3027 - padding-bottom: 0;
3028 - }
3029 -
3030 - .mxchat-mappings-table {
3031 - display: block;
3032 - overflow-x: auto;
3033 - }
3034 -
3035 - .mxchat-mappings-table th,
3036 - .mxchat-mappings-table td {
3037 - padding: 10px;
3038 - font-size: 13px;
3039 - }
3040 -
3041 - .mxchat-mapping-actions {
3042 - flex-direction: column;
3043 - align-items: flex-start;
3044 - }
3045 -}
3046 -
3047 -/* RTL Support */
3048 -.rtl .mxchat-mappings-table th,
3049 -.rtl .mxchat-mappings-table td {
3050 - text-align: right;
3051 -}
3052 -
3053 -.rtl .mxchat-tag-badge {
3054 - flex-direction: row-reverse;
3055 -}
3056 -
3057 -.rtl .mxchat-role-info-banner {
3058 - border-left: none;
3059 - border-right: 4px solid #7873f5;
3060 -}
3061 -
3062 -.rtl .mxchat-bulk-update-section {
3063 - border-right: none;
3064 -}
3065 -
3066 -.rtl #mxchat-bulk-update-result {
3067 - border-left: none;
3068 - border-right: 4px solid;
3069 -}
3070 -
3071 -.rtl .mxchat-role-spinner {
3072 - margin-right: 0;
3073 - margin-left: 10px;
3074 -}
3075 -
3076 -/* ===== Chunk Grouping Styles ===== */
3077 -.mxchat-chunk-group-header {
3078 - background: rgba(120, 115, 245, 0.04) !important;
3079 - border-left: 3px solid #7873f5;
3080 -}
3081 -
3082 -.mxchat-chunk-group-header:hover {
3083 - background: rgba(120, 115, 245, 0.08) !important;
3084 -}
3085 -
3086 -.mxchat-chunk-group-info {
3087 - display: flex;
3088 - align-items: center;
3089 - gap: 12px;
3090 -}
3091 -
3092 -.mxchat-chunk-toggle {
3093 - flex-shrink: 0;
3094 - width: 28px;
3095 - height: 28px;
3096 - border: none;
3097 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.1), rgba(120, 115, 245, 0.1));
3098 - border-radius: 6px;
3099 - cursor: pointer;
3100 - display: inline-flex;
3101 - align-items: center;
3102 - justify-content: center;
3103 - transition: all 0.3s ease;
3104 - padding: 0;
3105 -}
3106 -
3107 -.mxchat-chunk-toggle:hover {
3108 - background: linear-gradient(135deg, rgba(250, 115, 230, 0.2), rgba(120, 115, 245, 0.2));
3109 - transform: scale(1.05);
3110 -}
3111 -
3112 -.mxchat-chunk-toggle .dashicons {
3113 - font-size: 16px;
3114 - color: #7873f5;
3115 - transition: transform 0.3s ease;
3116 -}
3117 -
3118 -.mxchat-chunk-toggle.expanded .dashicons {
3119 - transform: rotate(90deg);
3120 -}
3121 -
3122 -.mxchat-chunk-badge {
3123 - display: inline-flex;
3124 - align-items: center;
3125 - padding: 4px 10px;
3126 - background: linear-gradient(135deg, #7873f5, #3ac9d1);
3127 - color: white;
3128 - border-radius: 12px;
3129 - font-size: 12px;
3130 - font-weight: 600;
3131 - white-space: nowrap;
3132 -}
3133 -
3134 -.mxchat-chunk-preview {
3135 - flex: 1;
3136 - color: #666;
3137 - font-size: 13px;
3138 - overflow: hidden;
3139 - text-overflow: ellipsis;
3140 - white-space: nowrap;
3141 -}
3142 -
3143 -.mxchat-chunk-row {
3144 - border-left: 3px solid #e0e0e0;
3145 -}
3146 -
3147 -.mxchat-chunk-row td:first-child {
3148 - padding-left: 30px !important;
3149 -}
3150 -
3151 -.mxchat-chunk-indicator {
3152 - display: inline-flex;
3153 - align-items: center;
3154 - padding: 2px 8px;
3155 - background: #f0f0f0;
3156 - color: #666;
3157 - border-radius: 4px;
3158 - font-size: 11px;
3159 - font-weight: 500;
3160 -}
3161 -
3162 -.mxchat-chunk-label {
3163 - color: #999;
3164 - font-size: 12px;
3165 - font-style: italic;
3166 -}
3167 -
3168 -/* Delete button for chunk groups */
3169 -.delete-button-group {
3170 - background: none;
3171 - border: none;
3172 - cursor: pointer;
3173 - padding: 4px;
3174 - border-radius: 4px;
3175 - transition: all 0.2s ease;
3176 -}
3177 -
3178 -.delete-button-group:hover {
3179 - background: rgba(255, 0, 0, 0.1);
3180 -}
3181 -
3182 -.delete-button-group .dashicons {
3183 - color: #dc3545;
3184 -}
3185 -
3186 -.delete-button-group .dashicons.spin {
3187 - animation: mxchat-spin 1s linear infinite;
3188 -}
3189 -
3190 -@keyframes mxchat-spin {
3191 - from { transform: rotate(0deg); }
3192 - to { transform: rotate(360deg); }
3193 -}
3194 -
3195 -/* ===== Sitemap Detection Styles ===== */
3196 -.dashicons.spin {
3197 - animation: mxchat-spin 1s linear infinite;
3198 -}
3199 -
3200 -.mxchat-sitemap-group.expanded .mxchat-sitemap-sub-list {
3201 - display: block !important;
3202 -}
3203 -
3204 -.mxchat-sitemap-group.expanded .dashicons-arrow-right-alt2 {
3205 - transform: rotate(90deg) !important;
3206 -}
3207 -
3208 -.mxchat-sitemap-row:last-child {
3209 - border-bottom: none !important;
3210 -}
3211 -
3212 -.mxchat-detected-sitemaps {
3213 - margin-top: 24px;
3214 -}
3215 -
3216 -.mxchat-sitemaps-header {
3217 - display: flex;
3218 - align-items: center;
3219 - justify-content: space-between;
3220 - margin-bottom: 16px;
3221 -}
3222 -
3223 -.mxchat-sitemaps-header h4 {
3224 - margin: 0;
3225 - display: flex;
3226 - align-items: center;
3227 - gap: 8px;
3228 -}
3229 -
3230 -.mxchat-sitemaps-header h4 .dashicons {
3231 - color: #7873f5;
3232 -}
3233 -
3234 -.mxchat-sitemap-group {
3235 - margin-bottom: 16px;
3236 - border: 1px solid rgba(120, 115, 245, 0.2);
3237 - border-radius: 8px;
3238 - overflow: hidden;
3239 -}
3240 -
3241 -.mxchat-sitemap-group-header {
3242 - padding: 12px 16px;
3243 - background: #f8fafc;
3244 - display: flex;
3245 - align-items: center;
3246 - justify-content: space-between;
3247 - cursor: pointer;
3248 - transition: background-color 0.2s ease;
3249 -}
3250 -
3251 -.mxchat-sitemap-group-header:hover {
3252 - background: #f0f4f8;
3253 -}
3254 -
3255 -.mxchat-sitemap-sub-list {
3256 - display: none;
3257 - border-top: 1px solid rgba(120, 115, 245, 0.2);
3258 -}
3259 -
3260 -.mxchat-sitemap-row {
3261 - padding: 12px 16px;
3262 - display: flex;
3263 - align-items: center;
3264 - justify-content: space-between;
3265 - border-bottom: 1px solid rgba(120, 115, 245, 0.1);
3266 -}
3267 -
3268 -.mxchat-sitemap-row.sub-item {
3269 - padding-left: 40px;
3270 -}
3271 -
3272 -.mxchat-sitemaps-loading {
3273 - margin-top: 24px;
3274 - padding: 20px;
3275 - text-align: center;
3276 -}
3277 -
3278 -.mxchat-sitemaps-loading .dashicons {
3279 - font-size: 20px;
3280 - color: #7873f5;
3281 -}
3282 -
3283 -.mxchat-sitemaps-loading p {
3284 - margin: 8px 0 0;
3285 - color: #666;
3286 -}
3287 -
3288 -.mxchat-no-sitemaps {
3289 - margin-top: 24px;
3290 - padding: 20px;
3291 - background: #f8fafc;
3292 - border-radius: 8px;
3293 - text-align: center;
3294 -}
3295 -
3296 -.mxchat-no-sitemaps .dashicons {
3297 - font-size: 24px;
3298 - color: #999;
3299 - margin-bottom: 8px;
3300 -}
3301 -
3302 -.mxchat-no-sitemaps p {
3303 - margin: 0;
3304 - color: #666;
3305 -}
3306 -
3307 -/* ===== Admin Notice Dismiss Button Styles ===== */
3308 -.notice.is-dismissible {
3309 - position: relative;
3310 - padding-right: 38px;
3311 -}
3312 -
3313 -.notice-dismiss {
3314 - position: absolute;
3315 - top: 50%;
3316 - right: 8px;
3317 - transform: translateY(-50%);
3318 - padding: 0;
3319 - background: none;
3320 - border: none;
3321 - cursor: pointer;
3322 - color: #787c82;
3323 - width: 24px;
3324 - height: 24px;
3325 - display: flex;
3326 - align-items: center;
3327 - justify-content: center;
3328 - transition: color 0.2s ease;
3329 -}
3330 -
3331 -.notice-dismiss:hover {
3332 - color: #d63638;
3333 -}
3334 -
3335 -.notice-dismiss:before {
3336 - content: "\f153";
3337 - font-family: dashicons;
3338 - font-size: 16px;
3339 - line-height: 1;
3340 -}
3341 -
3342 -.notice-dismiss .screen-reader-text {
3343 - position: absolute;
3344 - width: 1px;
3345 - height: 1px;
3346 - padding: 0;
3347 - margin: -1px;
3348 - overflow: hidden;
3349 - clip: rect(0, 0, 0, 0);
3350 - white-space: nowrap;
3351 - border: 0;
3352 -}
3353 -
3354 -/* ===== AJAX Pagination Styles ===== */
3355 -.mxchat-kb-pagination-wrapper {
3356 - background: #f8fafc;
3357 -}
3358 -
3359 -.mxchat-ajax-pagination {
3360 - display: flex;
3361 - align-items: center;
3362 - justify-content: center;
3363 - gap: 8px;
3364 - flex-wrap: wrap;
3365 -}
3366 -
3367 -.mxchat-page-link {
3368 - display: inline-flex;
3369 - align-items: center;
3370 - justify-content: center;
3371 - min-width: 36px;
3372 - height: 36px;
3373 - padding: 0 12px;
3374 - background: #fff;
3375 - border: 1px solid var(--mxch-card-border, #e5e7eb);
3376 - border-radius: 6px;
3377 - color: var(--mxch-text-primary, #1f2937);
3378 - text-decoration: none;
3379 - font-size: 13px;
3380 - font-weight: 500;
3381 - transition: all 0.2s ease;
3382 - cursor: pointer;
3383 -}
3384 -
3385 -.mxchat-page-link:hover {
3386 - background: var(--mxch-primary, #7873f5);
3387 - border-color: var(--mxch-primary, #7873f5);
3388 - color: #fff;
3389 - text-decoration: none;
3390 -}
3391 -
3392 -.mxchat-page-link.loading {
3393 - opacity: 0.6;
3394 - pointer-events: none;
3395 -}
3396 -
3397 -.mxchat-page-current {
3398 - display: inline-flex;
3399 - align-items: center;
3400 - justify-content: center;
3401 - min-width: 36px;
3402 - height: 36px;
3403 - padding: 0 12px;
3404 - background: var(--mxch-primary, #7873f5);
3405 - border: 1px solid var(--mxch-primary, #7873f5);
3406 - border-radius: 6px;
3407 - color: #fff;
3408 - font-size: 13px;
3409 - font-weight: 600;
3410 -}
3411 -
3412 -.mxchat-page-dots {
3413 - display: inline-flex;
3414 - align-items: center;
3415 - justify-content: center;
3416 - min-width: 24px;
3417 - height: 36px;
3418 - color: var(--mxch-text-muted, #9ca3af);
3419 - font-size: 14px;
3420 -}
3421 -
3422 -.mxchat-pagination-loading {
3423 - margin-left: 12px;
3424 -}
3425 -
3426 -.mxchat-pagination-loading .dashicons {
3427 - color: var(--mxch-primary, #7873f5);
3428 -}
3429 -
3430 -/* Spin animation for loading indicator */
3431 -@keyframes mxchat-spin {
3432 - from { transform: rotate(0deg); }
3433 - to { transform: rotate(360deg); }
3434 -}
3435 -
3436 -.mxchat-pagination-loading .spin,
3437 -.mxchat-ajax-pagination .spin {
3438 - animation: mxchat-spin 1s linear infinite;
3439 -}
3440 -
3441 -/* Mobile responsive pagination */
3442 -@media (max-width: 600px) {
3443 - .mxchat-ajax-pagination {
3444 - gap: 4px;
3445 - }
3446 -
3447 - .mxchat-page-link,
3448 - .mxchat-page-current {
3449 - min-width: 32px;
3450 - height: 32px;
3451 - padding: 0 8px;
3452 - font-size: 12px;
3453 - }
3454 -
3455 - .mxchat-page-dots {
3456 - min-width: 20px;
3457 - }
3458 -}
3459 -
3460 -/* ========================================
3461 - BULK SELECTION STYLES
3462 - ======================================== */
3463 -
3464 -/* Bulk Actions Toolbar */
3465 -.mxchat-bulk-toolbar {
3466 - display: flex;
3467 - align-items: center;
3468 - gap: 12px;
3469 - padding: 12px 16px;
3470 - background: #f8fafc;
3471 - border: 1px solid var(--mxch-card-border);
3472 - border-bottom: none;
3473 - border-radius: var(--mxch-radius-md) var(--mxch-radius-md) 0 0;
3474 -}
3475 -
3476 -.mxchat-bulk-select-label {
3477 - display: flex;
3478 - align-items: center;
3479 - gap: 6px;
3480 - font-size: 13px;
3481 - color: var(--mxch-text-secondary);
3482 - cursor: pointer;
3483 -}
3484 -
3485 -.mxchat-bulk-select-label:hover {
3486 - color: var(--mxch-text-primary);
3487 -}
3488 -
3489 -.mxchat-entry-checkbox,
3490 -.mxchat-entry-checkbox-all {
3491 - width: 16px;
3492 - height: 16px;
3493 - cursor: pointer;
3494 - accent-color: var(--mxch-primary, #7873f5);
3495 -}
3496 -
3497 -.mxchat-bulk-actions {
3498 - display: flex;
3499 - align-items: center;
3500 - gap: 8px;
3501 - margin-left: auto;
3502 -}
3503 -
3504 -.mxchat-bulk-delete {
3505 - display: flex;
3506 - align-items: center;
3507 - gap: 6px;
3508 - color: var(--mxch-error, #dc2626) !important;
3509 - border-color: #fecaca !important;
3510 - background: transparent !important;
3511 -}
3512 -
3513 -.mxchat-bulk-delete:hover:not(:disabled) {
3514 - background: #fef2f2 !important;
3515 - border-color: #fca5a5 !important;
3516 -}
3517 -
3518 -.mxchat-bulk-delete:disabled {
3519 - opacity: 0.5;
3520 - cursor: not-allowed;
3521 -}
3522 -
3523 -.mxchat-selected-count {
3524 - font-size: 12px;
3525 - color: var(--mxch-primary, #7873f5);
3526 - font-weight: 600;
3527 - margin-left: 4px;
3528 -}
3529 -
3530 -/* Delete container - holds Delete All form and Delete Selected button */
3531 -.mxchat-delete-container {
3532 - display: flex;
3533 - align-items: center;
3534 -}
3535 -
3536 -/* Selected row highlighting */
3537 -#mxchat-records-table tr.selected {
3538 - background-color: rgba(120, 115, 245, 0.05) !important;
3539 -}
3540 -
3541 -#mxchat-records-table tr.selected td:first-child {
3542 - position: relative;
3543 -}
3544 -
3545 -#mxchat-records-table tr.selected td:first-child::before {
3546 - content: '';
3547 - position: absolute;
3548 - left: 0;
3549 - top: 0;
3550 - bottom: 0;
3551 - width: 3px;
3552 - background: var(--mxch-primary, #7873f5);
3553 -}
3554 -
3555 -/* Deleting state */
3556 -tr.mxchat-row-deleting {
3557 - opacity: 0.5;
3558 - pointer-events: none;
3559 -}
3560 -
3561 -/* Error state for failed deletions */
3562 -tr.mxchat-row-error {
3563 - background-color: rgba(220, 38, 38, 0.05) !important;
3564 -}
3565 -
3566 -tr.mxchat-row-error td:first-child {
3567 - position: relative;
3568 -}
3569 -
3570 -tr.mxchat-row-error td:first-child::before {
3571 - content: '';
3572 - position: absolute;
3573 - left: 0;
3574 - top: 0;
3575 - bottom: 0;
3576 - width: 3px;
3577 - background: var(--mxch-error, #dc2626);
3578 -}
3579 -
3580 -/* Spin animation for loading states */
3581 -.spin {
3582 - animation: mxchat-spin 1s linear infinite;
3583 -}
3584 -
3585 -/* Responsive adjustments for bulk toolbar */
3586 -@media (max-width: 768px) {
3587 - .mxchat-bulk-toolbar {
3588 - flex-wrap: wrap;
3589 - gap: 8px;
3590 - }
3591 -
3592 - .mxchat-bulk-delete-text {
3593 - display: none;
3594 - }
3595 -
3596 - .mxchat-bulk-actions {
3597 - margin-left: 0;
3598 - }
3599 -}
3600 -
3601 -/* ==========================================================================
3602 - Knowledge Base - Mobile Responsive
3603 - ========================================================================== */
3604 -
3605 -/* Desktop defaults for KB header controls */
3606 -.mxch-kb-header-controls {
3607 - display: flex;
3608 - gap: 10px;
3609 - align-items: center;
3610 -}
3611 -
3612 -.mxch-kb-search-form {
3613 - display: flex;
3614 - gap: 10px;
3615 -}
3616 -
3617 -.mxch-kb-search-input {
3618 - width: 200px;
3619 -}
3620 -
3621 -.mxch-kb-type-filter {
3622 - width: auto;
3623 -}
3624 -
3625 -/* Mobile: Knowledge Base card header stacks vertically */
3626 -@media screen and (max-width: 960px) {
3627 - /* Stack card header vertically */
3628 - #knowledge-base .mxch-card-header {
3629 - flex-direction: column;
3630 - align-items: stretch;
3631 - gap: 12px;
3632 - padding: 12px 16px;
3633 - }
3634 -
3635 - /* Title row wraps badges */
3636 - #knowledge-base .mxch-card-title {
3637 - flex-wrap: wrap;
3638 - font-size: 14px;
3639 - }
3640 -
3641 - /* Controls stack vertically */
3642 - .mxch-kb-header-controls {
3643 - flex-direction: column;
3644 - align-items: stretch;
3645 - gap: 8px;
3646 - width: 100%;
3647 - }
3648 -
3649 - /* Search form wraps */
3650 - .mxch-kb-search-form {
3651 - flex-wrap: wrap;
3652 - gap: 8px;
3653 - width: 100%;
3654 - }
3655 -
3656 - /* Search input takes full width */
3657 - .mxch-kb-search-input {
3658 - width: 100% !important;
3659 - flex: 1;
3660 - min-width: 0;
3661 - }
3662 -
3663 - /* Filter dropdown takes full width */
3664 - .mxch-kb-type-filter {
3665 - width: 100% !important;
3666 - flex: 1;
3667 - min-width: 0;
3668 - }
3669 -
3670 - /* Delete container full width */
3671 - .mxchat-delete-container {
3672 - width: 100%;
3673 - }
3674 -
3675 - .mxchat-delete-container form,
3676 - .mxchat-delete-container .mxchat-bulk-delete {
3677 - width: 100%;
3678 - }
3679 -
3680 - .mxchat-delete-container .mxch-btn {
3681 - width: 100%;
3682 - justify-content: center;
3683 - }
3684 -
3685 - /* Table: hide ID and Source columns on mobile to save space */
3686 - .mxchat-records-table th:nth-child(2),
3687 - .mxchat-records-table td:nth-child(2) {
3688 - display: none;
3689 - }
3690 -
3691 - .mxchat-records-table th:nth-child(4),
3692 - .mxchat-records-table td:nth-child(4) {
3693 - display: none;
3694 - }
3695 -
3696 - /* Content column needs more room */
3697 - .mxchat-content-cell {
3698 - max-width: none !important;
3699 - }
3700 -
3701 - /* Table cells padding */
3702 - .mxchat-records-table th,
3703 - .mxchat-records-table td {
3704 - padding: 10px 8px !important;
3705 - }
3706 -
3707 - /* Pagination wraps nicely */
3708 - .mxchat-ajax-pagination {
3709 - flex-wrap: wrap;
3710 - justify-content: center;
3711 - }
3712 -}
3713 -
3714 -/* Small mobile: further adjustments */
3715 -@media screen and (max-width: 480px) {
3716 - #knowledge-base .mxch-card-header {
3717 - padding: 10px 12px;
3718 - }
3719 -
3720 - #knowledge-base .mxch-card-title {
3721 - font-size: 13px;
3722 - }
3723 -
3724 - /* Search form items fully stacked */
3725 - .mxch-kb-search-form {
3726 - flex-direction: column;
3727 - }
3728 -
3729 - /* Smaller table text */
3730 - .mxchat-records-table {
3731 - font-size: 12px;
3732 - }
3733 -
3734 - .mxchat-records-table th,
3735 - .mxchat-records-table td {
3736 - padding: 8px 6px !important;
3737 - }
3738 -
3739 - /* Also hide Actions header text but keep the column for delete buttons */
3740 - .mxchat-records-table th:nth-child(5) {
3741 - font-size: 0;
3742 - padding: 8px 4px !important;
3743 - width: 40px;
3744 - }
3745 -}
3746 -
3747 -/* ─── Edit Entry Modal ─── */
3748 -
3749 -.mxchat-edit-entry-btn {
3750 - color: var(--mxch-primary, #7873f5);
3751 -}
3752 -.mxchat-edit-entry-btn:hover {
3753 - color: var(--mxch-primary-dark, #5b56d6);
3754 - background: rgba(120, 115, 245, 0.08);
3755 -}
3756 -
3757 -.mxchat-kb-edit-modal-content {
3758 - max-width: 760px;
3759 - max-height: 90vh;
3760 -}
3761 -
3762 -.mxchat-kb-edit-body {
3763 - flex: 1;
3764 - display: flex;
3765 - flex-direction: column;
3766 - padding: 20px;
3767 - overflow: hidden;
3768 - gap: 12px;
3769 -}
3770 -
3771 -.mxchat-kb-edit-source {
3772 - font-size: 12px;
3773 - color: var(--mxch-text-muted, #6b7280);
3774 - word-break: break-all;
3775 -}
3776 -.mxchat-kb-edit-source a {
3777 - color: var(--mxch-primary, #7873f5);
3778 - text-decoration: none;
3779 -}
3780 -
3781 -.mxchat-kb-edit-textarea {
3782 - flex: 1;
3783 - min-height: 300px;
3784 - max-height: 55vh;
3785 - width: 100%;
3786 - padding: 14px;
3787 - border: 1px solid var(--mxch-input-border, #d1d5db);
3788 - border-radius: 8px;
3789 - font-size: 14px;
3790 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
3791 - line-height: 1.6;
3792 - resize: vertical;
3793 - color: var(--mxch-text-primary, #1a1a2e);
3794 - background: var(--mxch-input-bg, #fff);
3795 - box-sizing: border-box;
3796 - transition: border-color 0.2s;
3797 -}
3798 -.mxchat-kb-edit-textarea:focus {
3799 - outline: none;
3800 - border-color: var(--mxch-primary, #7873f5);
3801 - box-shadow: 0 0 0 3px rgba(120, 115, 245, 0.1);
3802 -}
3803 -
3804 -.mxchat-kb-edit-meta {
3805 - display: flex;
3806 - justify-content: space-between;
3807 - font-size: 12px;
3808 - color: var(--mxch-text-muted, #6b7280);
3809 -}
3810 -
3811 -.mxchat-kb-edit-footer {
3812 - display: flex;
3813 - align-items: center;
3814 - justify-content: space-between;
3815 - padding: 14px 20px;
3816 - border-top: 1px solid #e5e5e5;
3817 - gap: 12px;
3818 -}
3819 -
3820 -.mxchat-kb-edit-notice {
3821 - flex: 1;
3822 - font-size: 13px;
3823 -}
3824 -.mxchat-kb-edit-notice.success { color: #16a34a; }
3825 -.mxchat-kb-edit-notice.error { color: #dc2626; }
3826 -
3827 -.mxchat-kb-edit-actions {
3828 - display: flex;
3829 - gap: 8px;
3830 - flex-shrink: 0;
3831 -}
3832 -
3833 -/* ── Knowledge Inspector modal (plan-d8cb4b) ──────────────────────────
3834 - Read-only "View indexed content" viewer. Reuses the Testing tab's
3835 - match-card / chunk-detail components (admin-testing-tab.css, scoped under
3836 - .mxch-testing-results) so it looks native; this block only adds the modal
3837 - body scroll + the chunk-text container the Testing tab doesn't have. */
3838 -.mxchat-kb-inspect-body {
3839 - flex: 1;
3840 - display: flex;
3841 - flex-direction: column;
3842 - padding: 20px;
3843 - overflow-y: auto;
3844 - gap: 12px;
3845 -}
3846 -/* The modal body is the scroll container — let the inner results grow naturally
3847 - instead of the Testing tab's own 400px inner scroll (avoids a double scrollbar). */
3848 -.mxchat-kb-inspect-body .mxch-testing-results {
3849 - max-height: none;
3850 - overflow: visible;
3851 -}
3852 -.mxch-kb-inspect-chunk-text {
3853 - margin: 8px 0 0;
3854 - padding: 12px 14px;
3855 - background: #f8fafc;
3856 - border: 1px solid #e2e8f0;
3857 - border-radius: 6px;
3858 - max-height: 260px;
3859 - overflow-y: auto;
3860 - white-space: pre-wrap;
3861 - word-break: break-word;
3862 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
3863 - font-size: 13px;
3864 - line-height: 1.6;
3865 - color: var(--mxch-text-primary, #334155);
3866 -}
3867 -
3868 -.mxchat-kb-edit-save-spinner {
3869 - display: inline-flex;
3870 - align-items: center;
3871 - gap: 6px;
3872 -}
3873 -
3874 -@media (max-width: 782px) {
3875 - .mxchat-kb-edit-modal-content {
3876 - width: 96%;
3877 - max-width: 96%;
3878 - margin: 10px auto;
3879 - max-height: 95vh;
3880 - }
3881 - .mxchat-kb-edit-body {
3882 - padding: 14px;
3883 - }
3884 - .mxchat-kb-edit-textarea {
3885 - min-height: 200px;
3886 - font-size: 15px;
3887 - }
3888 - .mxchat-kb-edit-footer {
3889 - flex-direction: column;
3890 - align-items: stretch;
3891 - }
3892 - .mxchat-kb-edit-actions {
3893 - justify-content: stretch;
3894 - }
3895 - .mxchat-kb-edit-actions .mxch-btn {
3896 - flex: 1;
3897 - text-align: center;
3898 - }
3899 -}
3900 -/* ==========================================================================
3901 - Custom Meta-key discovery picker (plan-mxchat-20260709-fe8e4e)
3902 - Canon-token chip picker mirroring the ACF discovery UX for non-ACF meta.
3903 - ========================================================================== */
3904 -.mxchat-meta-scan-controls {
3905 - display: flex;
3906 - align-items: center;
3907 - flex-wrap: wrap;
3908 - gap: 12px;
3909 - margin-bottom: 12px;
3910 -}
3911 -#mxchat-scan-meta-btn {
3912 - display: inline-flex;
3913 - align-items: center;
3914 - gap: 8px;
3915 -}
3916 -.mxchat-meta-scan-internal {
3917 - display: inline-flex;
3918 - align-items: center;
3919 - gap: 6px;
3920 - font-size: 13px;
3921 - color: var(--mxch-text-secondary, #64748b);
3922 - cursor: pointer;
3923 -}
3924 -.mxchat-meta-scan-loading,
3925 -.mxchat-meta-scan-empty {
3926 - font-size: 13px;
3927 - color: var(--mxch-text-secondary, #64748b);
3928 - margin: 8px 0 0;
3929 -}
3930 -.mxchat-meta-chip-grid {
3931 - display: grid;
3932 - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
3933 - gap: 10px;
3934 - margin-top: 12px;
3935 -}
3936 -.mxchat-meta-chip {
3937 - display: flex;
3938 - flex-direction: column;
3939 - align-items: flex-start;
3940 - gap: 4px;
3941 - text-align: left;
3942 - width: 100%;
3943 - padding: 10px 12px;
3944 - background: var(--mxch-card-bg, #fff);
3945 - border: 1px solid var(--mxch-card-border, #e2e8f0);
3946 - border-radius: var(--mxch-radius-md, 8px);
3947 - cursor: pointer;
3948 - transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
3949 -}
3950 -.mxchat-meta-chip:hover {
3951 - border-color: var(--mxch-primary, #7873f5);
3952 - box-shadow: 0 1px 4px rgba(120, 115, 245, 0.15);
3953 -}
3954 -.mxchat-meta-chip-main {
3955 - display: flex;
3956 - align-items: baseline;
3957 - flex-wrap: wrap;
3958 - gap: 8px;
3959 -}
3960 -.mxchat-meta-chip-name {
3961 - font-weight: 600;
3962 - color: var(--mxch-text-primary, #1a1a2e);
3963 - font-size: 13px;
3964 -}
3965 -.mxchat-meta-chip-key {
3966 - font-family: monospace;
3967 - font-size: 11px;
3968 - color: var(--mxch-text-muted, #94a3b8);
3969 - background: #f1f5f9;
3970 - padding: 1px 6px;
3971 - border-radius: 4px;
3972 -}
3973 -.mxchat-meta-chip-meta {
3974 - font-size: 11px;
3975 - color: var(--mxch-text-muted, #94a3b8);
3976 - white-space: nowrap;
3977 - overflow: hidden;
3978 - text-overflow: ellipsis;
3979 - max-width: 100%;
3980 -}
3981 -.mxchat-meta-chip-tick {
3982 - font-size: 11px;
3983 - font-weight: 600;
3984 - color: var(--mxch-primary, #7873f5);
3985 - margin-top: 2px;
3986 -}
3987 -.mxchat-meta-chip.is-added {
3988 - border-color: var(--mxch-success, #10b981);
3989 - background: rgba(16, 185, 129, 0.06);
3990 - cursor: default;
3991 -}
3992 -.mxchat-meta-chip.is-added .mxchat-meta-chip-tick {
3993 - color: var(--mxch-success, #10b981);
3994 -}
3995 -@media (max-width: 782px) {
3996 - .mxchat-meta-chip-grid {
3997 - grid-template-columns: 1fr;
3998 - }
3999 -}