← All changes | css/admin-style.css +3635 -11 2.0.3 → 3.0.4 View file →

		@@ -1,12 +1,36 @@
1	1	.wp-core-ui .notice.is-dismissible {
2	2	z-index: 10000;
3	3	}
4	4
	5	+#system_prompt_instructions {
	6	+ transition: height 0.3s ease;
	7	+}
	8	+.red-warning {
	9	+ color: red;
	10	+}
	11	+
5	12	.mxchat-form-intent {
6	13	background-color: rgba(240, 240, 245, 0.5);
7	14	}
	15	+/* Style the Add Ons submenu item with subtle gradient */
	16	+#adminmenu a[href="admin.php?page=mxchat-addons"] {
	17	+ position: relative;
	18	+ border-left: 3px solid #fa73e6;
	19	+ font-weight: 600;
	20	+ background-color: rgba(120, 115, 245, 0.08) !important;
	21	+}
8	22
	23	+/* Make the text stand out a bit more when active */
	24	+#adminmenu .current a[href="admin.php?page=mxchat-addons"] {
	25	+ color: white !important;
	26	+}
	27	+
	28	+/* Add hover effect with smooth transition */
	29	+#adminmenu a[href="admin.php?page=mxchat-addons"]:hover {
	30	+ background-color: rgba(120, 115, 245, 0.12) !important;
	31	+ color: white !important;
	32	+}
9	33	.mxchat-badge {
10	34	display: inline-block;
11	35	padding: 2px 8px;
12	36	border-radius: 12px;
		@@ -67,19 +91,8 @@
67	91	border-bottom: 1px solid #fff;
68	92	color: #000;
69	93	}
70	94
71		-/* Tab Content */
72		-.mxchat-tab-content {
73		- display: none;
74		- padding: 25px;
75		- background: white;
76		- border: 1px solid #ddd;
77		- border-radius: 10px;
78		- box-shadow: 0 2px 15px rgba(0,0,0,0.05);
79		- animation: fadeIn 0.3s ease-in-out;
80		-}
81		-
82	95	#default-db.mxchat-tab-content, #pinecone-db.mxchat-tab-content {
83	96	border: none;
84	97	box-shadow: none;
85	98	padding: 0px;
		@@ -249,12 +262,31 @@
249	262	}
250	263
251	264	/* Mobile Responsiveness */
252	265	@media screen and (max-width: 782px) {
	266	+ .mxchat-pro-notification ul {
	267	+ padding-left: 1.2em; /* Add left padding so bullets appear nicely */
	268	+ margin: 0.5em 0;
	269	+ text-align: left;
	270	+ list-style: disc; /* or 'none' if you don’t want bullets */
	271	+ }
	272	+
	273	+ .mxchat-pro-notification ul li {
	274	+ text-align: left;
	275	+ margin-bottom: 0.3em;
	276	+ }
	277	+
	278	+ .mxchat-pro-content p {
	279	+ text-align: left;
	280	+ }
253	281	.mxchat-knowledge-controls {
254	282	flex-direction: column;
255	283	}
256	284
	285	+ .mxchat-addon-notice-buttons {
	286	+ flex-direction: column;
	287	+ }
	288	+
257	289	.mxchat-grid-container {
258	290	display: grid;
259	291	/* Add these properties */
260	292	max-width: 100%; /* Constrain to parent width */
		@@ -2804,6 +2836,3598 @@
2804	2836	}
2805	2837
2806	2838	body.wp-admin .wrap.mxchat-admin-activation .form-table td {
2807	2839	margin-bottom: 1.5rem;
	2840	+ }
	2841	+}
	2842	+
	2843	+
	2844	+.video-tutorials-section {
	2845	+ max-width: 1200px;
	2846	+ margin: 0 auto;
	2847	+ padding: 0;
	2848	+}
	2849	+
	2850	+.section-intro {
	2851	+ text-align: center;
	2852	+ margin-bottom: 2rem;
	2853	+ font-size: 1.1rem;
	2854	+}
	2855	+
	2856	+.tutorial-grid {
	2857	+ display: grid;
	2858	+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	2859	+ gap: 2rem;
	2860	+ margin-bottom: 3rem;
	2861	+}
	2862	+
	2863	+.tutorial-item {
	2864	+ border: 1px solid #e0e0e0;
	2865	+ border-radius: 8px;
	2866	+ padding: 1.5rem;
	2867	+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	2868	+ transition: transform 0.3s ease, box-shadow 0.3s ease;
	2869	+ background-color: #fff;
	2870	+}
	2871	+
	2872	+.tutorial-item:hover {
	2873	+ transform: translateY(-5px);
	2874	+ box-shadow: 0 5px 15px rgba(0,0,0,0.1);
	2875	+}
	2876	+
	2877	+.tutorial-item h3 {
	2878	+ margin-top: 0;
	2879	+ font-size: 1.2rem;
	2880	+ color: #333;
	2881	+ border-bottom: 2px solid #f0f0f0;
	2882	+ padding-bottom: 0.75rem;
	2883	+ margin-bottom: 1rem;
	2884	+}
	2885	+
	2886	+.video-description p {
	2887	+ margin-bottom: 1rem;
	2888	+ color: #555;
	2889	+}
	2890	+
	2891	+.video-description small {
	2892	+ color: #888;
	2893	+ font-style: italic;
	2894	+}
	2895	+
	2896	+.video-link {
	2897	+ display: inline-flex;
	2898	+ align-items: center;
	2899	+ text-decoration: none;
	2900	+ color: #0073aa;
	2901	+ font-weight: 500;
	2902	+ margin-top: 0.5rem;
	2903	+ padding: 0.5rem 1rem;
	2904	+ border-radius: 4px;
	2905	+ background-color: #f7f7f7;
	2906	+ transition: background-color 0.2s ease;
	2907	+}
	2908	+
	2909	+.video-link:hover {
	2910	+ background-color: #e6f3fa;
	2911	+ color: #004d74;
	2912	+}
	2913	+
	2914	+.video-icon {
	2915	+ margin-right: 0.5rem;
	2916	+ display: inline-flex;
	2917	+ color: #e62117;
	2918	+}
	2919	+
	2920	+.support-section {
	2921	+ margin-top: 3rem;
	2922	+ padding-top: 2rem;
	2923	+ border-top: 1px solid #e0e0e0;
	2924	+ text-align: center;
	2925	+}
	2926	+
	2927	+.support-content {
	2928	+ max-width: 800px;
	2929	+ margin: 0 auto;
	2930	+ background-color: #f9f9f9;
	2931	+ padding: 2rem;
	2932	+ border-radius: 8px;
	2933	+}
	2934	+
	2935	+.support-content p {
	2936	+ margin-bottom: 1rem;
	2937	+ font-size: 1.1rem;
	2938	+ line-height: 1.6;
	2939	+}
	2940	+
	2941	+.support-content a {
	2942	+ color: #0073aa;
	2943	+ font-weight: 500;
	2944	+ text-decoration: none;
	2945	+ padding: 0.2rem 0.4rem;
	2946	+ border-radius: 3px;
	2947	+ transition: background-color 0.2s;
	2948	+}
	2949	+
	2950	+.support-content a:hover {
	2951	+ background-color: #e6f3fa;
	2952	+ text-decoration: underline;
	2953	+}
	2954	+
	2955	+.api-info-item h4 {
	2956	+ margin-top: 0;
	2957	+ color: #333;
	2958	+ margin-bottom: 1rem;
	2959	+}
	2960	+
	2961	+@media (max-width: 768px) {
	2962	+ .tutorial-grid {
	2963	+ grid-template-columns: 1fr;
	2964	+ }
	2965	+
	2966	+ .tutorial-item {
	2967	+ padding: 1rem;
	2968	+ }
	2969	+
	2970	+ .support-content {
	2971	+ padding: 1.5rem;
	2972	+ }
	2973	+}
	2974	+
	2975	+/* Additional CSS for the main admin page */
	2976	+
	2977	+/* Pro and Add-on notice messages */
	2978	+.mxchat-pro-notice,
	2979	+.mxchat-addon-notice {
	2980	+ margin: 0;
	2981	+ line-height: 1.6;
	2982	+ color: #333;
	2983	+}
	2984	+
	2985	+.mxchat-pro-notice a,
	2986	+.mxchat-addon-notice a {
	2987	+ text-decoration: none;
	2988	+ font-weight: 600;
	2989	+ transition: color 0.2s ease;
	2990	+}
	2991	+
	2992	+.mxchat-pro-notice a:hover,
	2993	+.mxchat-addon-notice a:hover {
	2994	+ text-decoration: underline;
	2995	+ color: #fff;
	2996	+}
	2997	+
	2998	+/* Tutorial Grid & Items */
	2999	+.tutorial-grid {
	3000	+ display: grid;
	3001	+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	3002	+ gap: 24px;
	3003	+ margin-top: 20px;
	3004	+}
	3005	+
	3006	+.tutorial-item {
	3007	+ background: #f8f9ff;
	3008	+ border-radius: 12px;
	3009	+ padding: 24px;
	3010	+ transition: all 0.3s ease;
	3011	+ border: 1px solid rgba(120, 115, 245, 0.1);
	3012	+}
	3013	+
	3014	+.tutorial-item:hover {
	3015	+ transform: translateY(-3px);
	3016	+ box-shadow: 0 6px 20px rgba(120, 115, 245, 0.12);
	3017	+}
	3018	+
	3019	+.tutorial-item h3 {
	3020	+ margin-top: 0;
	3021	+ margin-bottom: 16px;
	3022	+ color: #333;
	3023	+ font-size: 1.2rem;
	3024	+}
	3025	+
	3026	+.video-description p {
	3027	+ color: #666;
	3028	+ font-size: 0.95rem;
	3029	+ margin-bottom: 16px;
	3030	+}
	3031	+
	3032	+.video-description small {
	3033	+ color: #888;
	3034	+ font-size: 0.85rem;
	3035	+ font-style: italic;
	3036	+}
	3037	+
	3038	+.video-link {
	3039	+ display: inline-flex;
	3040	+ align-items: center;
	3041	+ gap: 8px;
	3042	+ padding: 8px 16px;
	3043	+ background: white;
	3044	+ border-radius: 8px;
	3045	+ text-decoration: none;
	3046	+ color: #7873f5;
	3047	+ font-weight: 600;
	3048	+ font-size: 0.9rem;
	3049	+ border: 1px solid rgba(120, 115, 245, 0.2);
	3050	+ transition: all 0.2s ease;
	3051	+}
	3052	+
	3053	+.video-link:hover {
	3054	+ background: #eef0ff;
	3055	+ color: #fa73e6;
	3056	+}
	3057	+
	3058	+.video-icon {
	3059	+ display: flex;
	3060	+ align-items: center;
	3061	+ justify-content: center;
	3062	+}
	3063	+
	3064	+/* Support Section */
	3065	+.support-section {
	3066	+ margin-top: 40px;
	3067	+ padding: 24px;
	3068	+ background: #f8f9ff;
	3069	+ border-radius: 12px;
	3070	+ border: 1px solid rgba(120, 115, 245, 0.1);
	3071	+}
	3072	+
	3073	+.support-section h3 {
	3074	+ margin-top: 0;
	3075	+ color: #333;
	3076	+}
	3077	+
	3078	+.support-content p {
	3079	+ color: #666;
	3080	+ margin-bottom: 12px;
	3081	+}
	3082	+
	3083	+.support-content a {
	3084	+ color: #7873f5;
	3085	+ text-decoration: none;
	3086	+ font-weight: 600;
	3087	+}
	3088	+
	3089	+.support-content a:hover {
	3090	+ color: #fa73e6;
	3091	+ text-decoration: underline;
	3092	+}
	3093	+
	3094	+/* Updated tab navigation */
	3095	+.mxchat-tabs {
	3096	+ display: flex;
	3097	+ gap: 2px;
	3098	+ margin-bottom: 20px;
	3099	+ border-bottom: 1px solid rgba(120, 115, 245, 0.1);
	3100	+}
	3101	+
	3102	+.mxchat-tab-button {
	3103	+ padding: 12px 24px;
	3104	+ background: none;
	3105	+ border: none;
	3106	+ border-bottom: 2px solid transparent;
	3107	+ color: #666;
	3108	+ cursor: pointer;
	3109	+ font-size: 14px;
	3110	+ transition: all 0.2s ease;
	3111	+}
	3112	+
	3113	+.mxchat-tab-button:hover {
	3114	+ color: #7873f5;
	3115	+}
	3116	+
	3117	+.mxchat-tab-button.active {
	3118	+ color: #7873f5;
	3119	+ border-bottom-color: #7873f5;
	3120	+}
	3121	+
	3122	+/* Tab content */
	3123	+.mxchat-tab-content {
	3124	+ display: none;
	3125	+}
	3126	+
	3127	+.mxchat-tab-content.active {
	3128	+ display: block;
	3129	+}
	3130	+
	3131	+
	3132	+
	3133	+
	3134	+/* Pro Notification Styling */
	3135	+.mxchat-pro-card {
	3136	+ background: linear-gradient(90deg, #f8f9ff 0%, #f0f4ff 100%);
	3137	+ border-left: 4px solid #6366f1;
	3138	+ border-radius: 8px;
	3139	+ box-shadow: 0 2px 10px rgba(99, 102, 241, 0.1);
	3140	+ margin-bottom: 25px;
	3141	+ overflow: hidden;
	3142	+}
	3143	+
	3144	+.mxchat-pro-notification {
	3145	+ display: flex;
	3146	+ flex-direction: row;
	3147	+ align-items: center;
	3148	+ justify-content: space-between;
	3149	+ padding: 20px 24px;
	3150	+}
	3151	+
	3152	+@media (max-width: 768px) {
	3153	+ .mxchat-pro-notification {
	3154	+ flex-direction: column;
	3155	+ text-align: center;
	3156	+ gap: 15px;
	3157	+ }
	3158	+}
	3159	+
	3160	+.mxchat-pro-content {
	3161	+ flex: 1;
	3162	+ padding-right: 10px;
	3163	+}
	3164	+
	3165	+.mxchat-pro-content h3 {
	3166	+ margin-top: 0;
	3167	+ margin-bottom: 8px;
	3168	+ font-size: 18px;
	3169	+ color: #4338ca;
	3170	+ font-weight: 600;
	3171	+}
	3172	+
	3173	+.mxchat-pro-content p {
	3174	+ margin: 0;
	3175	+ color: #4b5563;
	3176	+ font-size: 14px;
	3177	+ line-height: 1.5;
	3178	+}
	3179	+
	3180	+.mxchat-pro-cta {
	3181	+ display: flex;
	3182	+ flex-direction: column;
	3183	+ gap: 8px;
	3184	+ min-width: 180px;
	3185	+}
	3186	+
	3187	+.mxchat-button {
	3188	+ display: inline-block;
	3189	+ background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
	3190	+ color: white !important;
	3191	+ font-weight: 600;
	3192	+ padding: 10px 20px;
	3193	+ border-radius: 6px;
	3194	+ text-decoration: none !important;
	3195	+ text-align: center;
	3196	+ transition: all 0.2s ease;
	3197	+ box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
	3198	+}
	3199	+
	3200	+.mxchat-button:hover {
	3201	+ transform: translateY(-2px);
	3202	+ box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
	3203	+}
	3204	+
	3205	+.mxchat-link {
	3206	+ color: #6366f1 !important;
	3207	+ text-decoration: none !important;
	3208	+ text-align: center;
	3209	+ font-size: 14px;
	3210	+ padding: 4px;
	3211	+}
	3212	+
	3213	+.mxchat-link:hover {
	3214	+ text-decoration: underline !important;
	3215	+}
	3216	+
	3217	+
	3218	+
	3219	+
	3220	+
	3221	+
	3222	+
	3223	+/* API Key field styles */
	3224	+.api-key-wrapper {
	3225	+ margin-bottom: 15px;
	3226	+ padding: 15px;
	3227	+ border-radius: 5px;
	3228	+ border-left: 4px solid #2271b1;
	3229	+ background-color: #f0f6fc;
	3230	+ transition: all 0.3s ease;
	3231	+}
	3232	+
	3233	+/* Row-level visibility handling */
	3234	+tr.mxchat-setting-row {
	3235	+ display: table-row;
	3236	+ transition: all 0.3s ease;
	3237	+}
	3238	+
	3239	+tr.mxchat-setting-row.highlighted {
	3240	+ animation: highlight-row 1.5s ease;
	3241	+}
	3242	+
	3243	+.api-key-wrapper input[type="password"] {
	3244	+ margin-right: 10px;
	3245	+}
	3246	+
	3247	+.api-key-wrapper button {
	3248	+ background: #f6f7f7;
	3249	+ border: 1px solid #c3c4c7;
	3250	+ color: #50575e;
	3251	+ cursor: pointer;
	3252	+ border-radius: 3px;
	3253	+ padding: 0 10px;
	3254	+ height: 30px;
	3255	+ line-height: 28px;
	3256	+ font-size: 13px;
	3257	+}
	3258	+
	3259	+.api-key-wrapper button:hover {
	3260	+ background: #f0f0f1;
	3261	+}
	3262	+
	3263	+.api-key-notice {
	3264	+ margin-top: 8px !important;
	3265	+ color: #1e1e1e;
	3266	+ font-style: italic;
	3267	+}
	3268	+
	3269	+@keyframes highlight-field {
	3270	+ 0% {
	3271	+ background-color: #e5f5fa;
	3272	+ }
	3273	+ 50% {
	3274	+ background-color: #c7e8f3;
	3275	+ }
	3276	+ 100% {
	3277	+ background-color: #f0f6fc;
	3278	+ }
	3279	+}
	3280	+
	3281	+@keyframes highlight-row {
	3282	+ 0% { background-color: transparent; }
	3283	+ 50% { background-color: #e5f5fa; }
	3284	+ 100% { background-color: transparent; }
	3285	+}
	3286	+
	3287	+/* Customize the look based on provider */
	3288	+.api-key-wrapper[data-provider="openai"] {
	3289	+ border-left-color: #10a37f;
	3290	+}
	3291	+
	3292	+.api-key-wrapper[data-provider="xai"] {
	3293	+ border-left-color: #0077e6;
	3294	+}
	3295	+
	3296	+.api-key-wrapper[data-provider="claude"] {
	3297	+ border-left-color: #a065d5;
	3298	+}
	3299	+
	3300	+.api-key-wrapper[data-provider="deepseek"] {
	3301	+ border-left-color: #3b7fc4;
	3302	+}
	3303	+
	3304	+.api-key-wrapper[data-provider="voyage"] {
	3305	+ border-left-color: #ff6b00;
	3306	+}
	3307	+
	3308	+
	3309	+
	3310	+
	3311	+
	3312	+
	3313	+
	3314	+
	3315	+
	3316	+
	3317	+
	3318	+
	3319	+
	3320	+
	3321	+
	3322	+
	3323	+/* Add-on styling */
	3324	+.mxchat-addon-badge {
	3325	+ display: inline-block;
	3326	+ background: linear-gradient(135deg, #FF8C00, #FFA500);
	3327	+ color: white;
	3328	+ font-size: 10px;
	3329	+ padding: 2px 6px;
	3330	+ border-radius: 10px;
	3331	+ margin-top: 5px;
	3332	+ font-weight: 600;
	3333	+ margin-left: 6px;
	3334	+}
	3335	+
	3336	+.mxchat-addon-info {
	3337	+ font-size: 11px;
	3338	+ color: #666;
	3339	+ margin-top: 8px;
	3340	+ background: rgba(255, 140, 0, 0.1);
	3341	+ padding: 4px 8px;
	3342	+ border-radius: 4px;
	3343	+ display: inline-block;
	3344	+}
	3345	+
	3346	+.mxchat-action-type-card.not-installed {
	3347	+ opacity: 0.8;
	3348	+ border-style: dashed;
	3349	+ background: rgba(255, 255, 255, 0.8);
	3350	+}
	3351	+
	3352	+.mxchat-action-type-card.not-installed:hover {
	3353	+ opacity: 1;
	3354	+ border-color: #FF8C00;
	3355	+ box-shadow: 0 4px 12px rgba(255, 140, 0, 0.1);
	3356	+}
	3357	+
	3358	+/* Add-on Notice */
	3359	+.mxchat-addon-notice {
	3360	+ position: fixed;
	3361	+ top: 0;
	3362	+ left: 0;
	3363	+ width: 100%;
	3364	+ height: 100%;
	3365	+ background: rgba(0, 0, 0, 0.5);
	3366	+ z-index: 100003;
	3367	+ display: flex;
	3368	+ align-items: center;
	3369	+ justify-content: center;
	3370	+ opacity: 0;
	3371	+ visibility: hidden;
	3372	+ transition: opacity 0.3s ease, visibility 0.3s ease;
	3373	+}
	3374	+
	3375	+.mxchat-addon-notice.active {
	3376	+ opacity: 1;
	3377	+ visibility: visible;
	3378	+}
	3379	+
	3380	+.mxchat-addon-notice-content {
	3381	+ background: white;
	3382	+ padding: 30px;
	3383	+ border-radius: 16px;
	3384	+ max-width: 400px;
	3385	+ text-align: center;
	3386	+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	3387	+ transform: translateY(-20px);
	3388	+ transition: transform 0.3s ease;
	3389	+}
	3390	+
	3391	+.mxchat-addon-notice.active .mxchat-addon-notice-content {
	3392	+ transform: translateY(0);
	3393	+}
	3394	+
	3395	+.mxchat-addon-notice-icon {
	3396	+ font-size: 36px;
	3397	+ margin-bottom: 15px;
	3398	+ display: block;
	3399	+}
	3400	+
	3401	+.mxchat-addon-notice h3 {
	3402	+ margin: 0 0 10px 0;
	3403	+ font-size: 20px;
	3404	+ background: linear-gradient(135deg, #FF8C00, #FFA500);
	3405	+ -webkit-background-clip: text;
	3406	+ background-clip: text;
	3407	+ -webkit-text-fill-color: transparent;
	3408	+ display: inline-block;
	3409	+}
	3410	+
	3411	+.mxchat-addon-notice p {
	3412	+ margin: 0 0 20px 0;
	3413	+ color: #666;
	3414	+}
	3415	+
	3416	+.mxchat-addon-notice-buttons {
	3417	+ display: flex;
	3418	+ gap: 10px;
	3419	+ justify-content: center;
	3420	+}
	3421	+
	3422	+
	3423	+
	3424	+
	3425	+
	3426	+/* CSS for the custom post types accordion */
	3427	+.mxchat-settings-accordion {
	3428	+ margin: 15px 0;
	3429	+ border-radius: 4px;
	3430	+ overflow: hidden;
	3431	+ border: 1px solid #e0e0e5;
	3432	+}
	3433	+
	3434	+.mxchat-accordion-header {
	3435	+ border-bottom: none;
	3436	+}
	3437	+
	3438	+.mxchat-accordion-button {
	3439	+ background-color: #f7f7f9;
	3440	+ border: none;
	3441	+ color: #444;
	3442	+ cursor: pointer;
	3443	+ font-size: 15px;
	3444	+ font-weight: 500;
	3445	+ padding: 14px 20px;
	3446	+ text-align: left;
	3447	+ transition: all 0.2s ease;
	3448	+ width: 100%;
	3449	+ display: flex;
	3450	+ justify-content: space-between;
	3451	+ align-items: center;
	3452	+ outline: none;
	3453	+}
	3454	+
	3455	+.mxchat-accordion-button:hover {
	3456	+ background-color: #f0f0f5;
	3457	+}
	3458	+
	3459	+.mxchat-accordion-icon {
	3460	+ font-size: 12px;
	3461	+ color: #666;
	3462	+ transition: transform 0.3s ease;
	3463	+}
	3464	+
	3465	+.mxchat-accordion-content {
	3466	+ border-top: 1px solid #e0e0e5;
	3467	+ transition: all 0.3s ease;
	3468	+}
	3469	+
	3470	+.mxchat-accordion-inner {
	3471	+ padding: 16px 20px;
	3472	+ background-color: #fff;
	3473	+}
	3474	+
	3475	+/* Make the custom post types look nicer */
	3476	+.mxchat-custom-post-types {
	3477	+ display: grid;
	3478	+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	3479	+ gap: 10px;
	3480	+ margin-top: 10px;
	3481	+}
	3482	+
	3483	+.mxchat-description {
	3484	+ margin-bottom: 15px;
	3485	+ color: #666;
	3486	+}
	3487	+
	3488	+.mxchat-empty-notice {
	3489	+ color: #888;
	3490	+ font-style: italic;
	3491	+}
	3492	+
	3493	+
	3494	+
	3495	+/* Model Selector Button Styles */
	3496	+.mxchat-model-selector-wrapper {
	3497	+ width: 100%;
	3498	+ position: relative;
	3499	+}
	3500	+
	3501	+.mxchat-model-selector-display {
	3502	+ display: flex;
	3503	+ justify-content: space-between;
	3504	+ align-items: center;
	3505	+ padding: 8px 12px;
	3506	+ background-color: #fff;
	3507	+ border: 1px solid #8c8f94;
	3508	+ border-radius: 4px;
	3509	+ cursor: pointer;
	3510	+ min-height: 30px;
	3511	+ line-height: 1.4;
	3512	+ box-sizing: border-box;
	3513	+ transition: border-color 0.2s;
	3514	+}
	3515	+
	3516	+.mxchat-model-selector-display:hover {
	3517	+ border-color: #2271b1;
	3518	+}
	3519	+
	3520	+.mxchat-model-selected-name {
	3521	+ white-space: nowrap;
	3522	+ overflow: hidden;
	3523	+ text-overflow: ellipsis;
	3524	+ flex: 1;
	3525	+}
	3526	+
	3527	+.mxchat-model-selector-arrow {
	3528	+ margin-left: 8px;
	3529	+ font-size: 10px;
	3530	+ color: #555;
	3531	+}
	3532	+
	3533	+/* Provider-specific border colors */
	3534	+.mxchat-model-provider-gemini {
	3535	+ border-left: 3px solid #4285F4;
	3536	+}
	3537	+
	3538	+.mxchat-model-provider-openai {
	3539	+ border-left: 3px solid #10A37F;
	3540	+}
	3541	+
	3542	+.mxchat-model-provider-claude {
	3543	+ border-left: 3px solid #965de9;
	3544	+}
	3545	+
	3546	+.mxchat-model-provider-xai {
	3547	+ border-left: 3px solid #000000;
	3548	+}
	3549	+
	3550	+.mxchat-model-provider-deepseek {
	3551	+ border-left: 3px solid #0066cc;
	3552	+}
	3553	+
	3554	+/* Modal Styles */
	3555	+.mxchat-model-selector-modal {
	3556	+ display: none;
	3557	+ position: fixed;
	3558	+ z-index: 9999;
	3559	+ left: 0;
	3560	+ top: 0;
	3561	+ width: 100%;
	3562	+ height: 100%;
	3563	+ overflow: auto;
	3564	+ background-color: rgba(0, 0, 0, 0.5);
	3565	+}
	3566	+
	3567	+.mxchat-model-selector-modal .mxchat-model-selector-modal-content {
	3568	+ background-color: #fff;
	3569	+ margin: 5% auto;
	3570	+ border-radius: 8px;
	3571	+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	3572	+ width: 80%;
	3573	+ max-width: 800px;
	3574	+ animation: mxchatModalFade 0.3s;
	3575	+}
	3576	+
	3577	+@keyframes mxchatModalFade {
	3578	+ from {opacity: 0; transform: translateY(-20px);}
	3579	+ to {opacity: 1; transform: translateY(0);}
	3580	+}
	3581	+
	3582	+.mxchat-model-selector-modal .mxchat-model-selector-modal-header {
	3583	+ display: flex;
	3584	+ justify-content: space-between;
	3585	+ align-items: center;
	3586	+ padding: 16px 24px;
	3587	+ border-bottom: 1px solid #eee;
	3588	+}
	3589	+
	3590	+.mxchat-model-selector-modal .mxchat-model-selector-modal-header h3 {
	3591	+ margin: 0;
	3592	+ color: #6750A4;
	3593	+ font-size: 20px;
	3594	+}
	3595	+
	3596	+.mxchat-model-selector-modal .mxchat-model-selector-modal-close {
	3597	+ font-size: 24px;
	3598	+ cursor: pointer;
	3599	+ color: #888;
	3600	+}
	3601	+
	3602	+.mxchat-model-selector-modal .mxchat-model-selector-modal-close:hover {
	3603	+ color: #333;
	3604	+}
	3605	+
	3606	+.mxchat-model-selector-modal .mxchat-model-selector-modal-body {
	3607	+ padding: 24px;
	3608	+ max-height: 60vh;
	3609	+ overflow-y: auto;
	3610	+}
	3611	+
	3612	+.mxchat-model-selector-modal .mxchat-model-selector-modal-footer {
	3613	+ padding: 16px 24px;
	3614	+ border-top: 1px solid #eee;
	3615	+ text-align: right;
	3616	+}
	3617	+
	3618	+/* Search and Category Styles */
	3619	+.mxchat-model-selector-modal .mxchat-model-selector-search-container {
	3620	+ margin-bottom: 20px;
	3621	+}
	3622	+
	3623	+.mxchat-model-selector-modal .mxchat-model-search-input {
	3624	+ width: 100%;
	3625	+ padding: 10px 15px;
	3626	+ border: 1px solid #ddd;
	3627	+ border-radius: 4px;
	3628	+ font-size: 16px;
	3629	+}
	3630	+
	3631	+.mxchat-model-selector-modal .mxchat-model-selector-categories {
	3632	+ display: flex;
	3633	+ flex-wrap: wrap;
	3634	+ gap: 8px;
	3635	+ margin-bottom: 20px;
	3636	+}
	3637	+
	3638	+.mxchat-model-selector-modal .mxchat-model-category-btn {
	3639	+ background-color: #f5f5f5;
	3640	+ border: 1px solid #ddd;
	3641	+ padding: 8px 16px;
	3642	+ border-radius: 20px;
	3643	+ cursor: pointer;
	3644	+ transition: all 0.2s;
	3645	+}
	3646	+
	3647	+.mxchat-model-selector-modal .mxchat-model-category-btn.active {
	3648	+ background-color: #6750A4;
	3649	+ color: white;
	3650	+ border-color: #6750A4;
	3651	+}
	3652	+
	3653	+/* Model Grid Styles */
	3654	+.mxchat-model-selector-modal .mxchat-model-selector-grid {
	3655	+ display: grid;
	3656	+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	3657	+ gap: 16px;
	3658	+}
	3659	+
	3660	+.mxchat-model-selector-modal .mxchat-model-selector-card,
	3661	+.mxchat-model-selector-modal .mxchat-openrouter-card {
	3662	+ display: flex;
	3663	+ border: 1px solid #ddd;
	3664	+ border-radius: 8px;
	3665	+ padding: 16px;
	3666	+ cursor: pointer;
	3667	+ transition: all 0.2s;
	3668	+ position: relative;
	3669	+}
	3670	+
	3671	+.mxchat-model-selector-modal .mxchat-model-selector-card:hover,
	3672	+.mxchat-model-selector-modal .mxchat-openrouter-card:hover {
	3673	+ border-color: #6750A4;
	3674	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	3675	+}
	3676	+
	3677	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-selected,
	3678	+.mxchat-model-selector-modal .mxchat-openrouter-card.mxchat-model-selected {
	3679	+ border-color: #6750A4;
	3680	+ background-color: rgba(103, 80, 164, 0.05);
	3681	+}
	3682	+
	3683	+/* Provider-specific styles for cards */
	3684	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-provider-gemini {
	3685	+ border-left: 4px solid #4285F4;
	3686	+}
	3687	+
	3688	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-provider-openai {
	3689	+ border-left: 4px solid #10A37F;
	3690	+}
	3691	+
	3692	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-provider-claude {
	3693	+ border-left: 4px solid #965de9;
	3694	+}
	3695	+
	3696	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-provider-xai {
	3697	+ border-left: 4px solid #000000;
	3698	+}
	3699	+
	3700	+.mxchat-model-selector-modal .mxchat-model-selector-card.mxchat-model-provider-deepseek {
	3701	+ border-left: 4px solid #0066cc;
	3702	+}
	3703	+
	3704	+.mxchat-model-selector-modal .mxchat-model-selector-icon {
	3705	+ margin-right: 12px;
	3706	+ font-size: 24px;
	3707	+ display: flex;
	3708	+ align-items: center;
	3709	+ width: 25px;
	3710	+ height: 45px;
	3711	+}
	3712	+
	3713	+.mxchat-model-selector-modal .mxchat-model-icon-gemini {
	3714	+ color: #4285F4;
	3715	+}
	3716	+
	3717	+.mxchat-model-selector-modal .mxchat-model-icon-openai {
	3718	+ color: #10A37F;
	3719	+}
	3720	+
	3721	+.mxchat-model-selector-modal .mxchat-model-icon-claude {
	3722	+ color: #965de9;
	3723	+}
	3724	+
	3725	+.mxchat-model-selector-modal .mxchat-model-icon-xai {
	3726	+ color: #000000;
	3727	+}
	3728	+
	3729	+.mxchat-model-selector-modal .mxchat-model-icon-deepseek {
	3730	+ color: #0066cc;
	3731	+}
	3732	+
	3733	+.mxchat-model-selector-modal .mxchat-model-selector-info {
	3734	+ flex: 1;
	3735	+}
	3736	+
	3737	+.mxchat-model-selector-modal .mxchat-model-selector-title {
	3738	+ margin: 0 0 6px 0;
	3739	+ font-size: 16px;
	3740	+}
	3741	+
	3742	+.mxchat-model-selector-modal .mxchat-model-selector-description {
	3743	+ margin: 0;
	3744	+ font-size: 14px;
	3745	+ color: #666;
	3746	+}
	3747	+
	3748	+.mxchat-model-selector-modal .mxchat-model-selector-checkmark {
	3749	+ position: absolute;
	3750	+ top: 8px;
	3751	+ right: 8px;
	3752	+ width: 20px;
	3753	+ height: 20px;
	3754	+ background-color: #6750A4;
	3755	+ color: white;
	3756	+ border-radius: 50%;
	3757	+ display: flex;
	3758	+ align-items: center;
	3759	+ justify-content: center;
	3760	+ font-size: 12px;
	3761	+}
	3762	+
	3763	+/* Media queries for responsive design */
	3764	+@media screen and (max-width: 782px) {
	3765	+ .mxchat-model-selector-modal .mxchat-model-selector-modal-content {
	3766	+ width: 95%;
	3767	+ margin: 10% auto;
	3768	+ }
	3769	+
	3770	+ .mxchat-model-selector-modal .mxchat-model-selector-grid {
	3771	+ grid-template-columns: 1fr;
	3772	+ }
	3773	+
	3774	+ .mxchat-model-selector-modal .mxchat-model-selector-categories {
	3775	+ overflow-x: auto;
	3776	+ padding-bottom: 10px;
	3777	+ }
	3778	+}
	3779	+
	3780	+
	3781	+/* Improved styling for the model selector button */
	3782	+#mxchat_model_selector_btn.mxchat-model-selector-btn {
	3783	+ width: 100%;
	3784	+ max-width: 400px;
	3785	+ text-align: left;
	3786	+ padding: 8px 12px;
	3787	+ height: auto;
	3788	+ min-height: 36px;
	3789	+ background-color: #fff;
	3790	+ color: #2c3338;
	3791	+ border: 1px solid #8c8f94;
	3792	+ border-radius: 4px;
	3793	+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	3794	+ position: relative;
	3795	+ font-weight: normal;
	3796	+ transition: all 0.2s ease;
	3797	+ display: flex;
	3798	+ align-items: center;
	3799	+ justify-content: space-between;
	3800	+}
	3801	+
	3802	+#mxchat_model_selector_btn.mxchat-model-selector-btn:after {
	3803	+ content: "\f140";
	3804	+ font-family: dashicons;
	3805	+ position: absolute;
	3806	+ right: 10px;
	3807	+ font-size: 20px;
	3808	+ color: #666;
	3809	+}
	3810	+
	3811	+#mxchat_model_selector_btn.mxchat-model-selector-btn:hover {
	3812	+ border-color: #2271b1;
	3813	+ color: #2271b1;
	3814	+}
	3815	+
	3816	+#mxchat_model_selector_btn.mxchat-model-selector-btn:focus {
	3817	+ box-shadow: 0 0 0 1px #2271b1;
	3818	+ outline: none;
	3819	+}
	3820	+
	3821	+/* Embedding Model Selector - completely separate styling to avoid conflicts */
	3822	+.mxchat-embedding-model-selector-btn {
	3823	+ width: 100%;
	3824	+ max-width: 400px;
	3825	+ text-align: left;
	3826	+ padding: 8px 12px;
	3827	+ height: auto;
	3828	+ min-height: 36px;
	3829	+ background-color: #fff;
	3830	+ color: #2c3338;
	3831	+ border: 1px solid #8c8f94;
	3832	+ border-radius: 4px;
	3833	+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	3834	+ position: relative;
	3835	+ font-weight: normal;
	3836	+ transition: all 0.2s ease;
	3837	+ display: flex;
	3838	+ align-items: center;
	3839	+ justify-content: space-between;
	3840	+}
	3841	+
	3842	+.mxchat-embedding-model-selector-btn:after {
	3843	+ content: "\f140";
	3844	+ font-family: dashicons;
	3845	+ position: absolute;
	3846	+ right: 10px;
	3847	+ font-size: 20px;
	3848	+ color: #666;
	3849	+}
	3850	+
	3851	+.mxchat-embedding-model-selector-btn:hover {
	3852	+ border-color: #2271b1;
	3853	+ color: #2271b1;
	3854	+}
	3855	+
	3856	+.mxchat-embedding-model-selector-btn:focus {
	3857	+ box-shadow: 0 0 0 1px #2271b1;
	3858	+ outline: none;
	3859	+}
	3860	+
	3861	+/* Modal Styles */
	3862	+.mxchat-embedding-model-selector-modal {
	3863	+ display: none;
	3864	+ position: fixed;
	3865	+ z-index: 9999;
	3866	+ left: 0;
	3867	+ top: 0;
	3868	+ width: 100%;
	3869	+ height: 100%;
	3870	+ overflow: auto;
	3871	+ background-color: rgba(0, 0, 0, 0.5);
	3872	+}
	3873	+
	3874	+.mxchat-embedding-model-selector-modal-content {
	3875	+ background-color: #fff;
	3876	+ margin: 5% auto;
	3877	+ border-radius: 8px;
	3878	+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	3879	+ width: 80%;
	3880	+ max-width: 800px;
	3881	+ animation: mxchatEmbeddingModalFade 0.3s;
	3882	+}
	3883	+
	3884	+@keyframes mxchatEmbeddingModalFade {
	3885	+ from {opacity: 0; transform: translateY(-20px);}
	3886	+ to {opacity: 1; transform: translateY(0);}
	3887	+}
	3888	+
	3889	+.mxchat-embedding-model-selector-modal-header {
	3890	+ display: flex;
	3891	+ justify-content: space-between;
	3892	+ align-items: center;
	3893	+ padding: 16px 24px;
	3894	+ border-bottom: 1px solid #eee;
	3895	+}
	3896	+
	3897	+.mxchat-embedding-model-selector-modal-header h3 {
	3898	+ margin: 0;
	3899	+ color: #6750A4;
	3900	+ font-size: 20px;
	3901	+}
	3902	+
	3903	+.mxchat-embedding-model-selector-modal-close {
	3904	+ font-size: 24px;
	3905	+ cursor: pointer;
	3906	+ color: #888;
	3907	+}
	3908	+
	3909	+.mxchat-embedding-model-selector-modal-close:hover {
	3910	+ color: #333;
	3911	+}
	3912	+
	3913	+.mxchat-embedding-model-selector-modal-body {
	3914	+ padding: 24px;
	3915	+ max-height: 60vh;
	3916	+ overflow-y: auto;
	3917	+}
	3918	+
	3919	+.mxchat-embedding-model-selector-modal-footer {
	3920	+ padding: 16px 24px;
	3921	+ border-top: 1px solid #eee;
	3922	+ text-align: right;
	3923	+}
	3924	+
	3925	+/* Search and Category Styles */
	3926	+.mxchat-embedding-model-selector-search-container {
	3927	+ margin-bottom: 20px;
	3928	+}
	3929	+
	3930	+.mxchat-embedding-model-search-input {
	3931	+ width: 100%;
	3932	+ padding: 10px 15px;
	3933	+ border: 1px solid #ddd;
	3934	+ border-radius: 4px;
	3935	+ font-size: 16px;
	3936	+}
	3937	+
	3938	+.mxchat-embedding-model-selector-categories {
	3939	+ display: flex;
	3940	+ flex-wrap: wrap;
	3941	+ gap: 8px;
	3942	+ margin-bottom: 20px;
	3943	+}
	3944	+
	3945	+.mxchat-embedding-model-category-btn {
	3946	+ background-color: #f5f5f5;
	3947	+ border: 1px solid #ddd;
	3948	+ padding: 8px 16px;
	3949	+ border-radius: 20px;
	3950	+ cursor: pointer;
	3951	+ transition: all 0.2s;
	3952	+}
	3953	+
	3954	+.mxchat-embedding-model-category-btn.active {
	3955	+ background-color: #6750A4;
	3956	+ color: white;
	3957	+ border-color: #6750A4;
	3958	+}
	3959	+
	3960	+/* Model Grid Styles */
	3961	+.mxchat-embedding-model-selector-grid {
	3962	+ display: grid;
	3963	+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	3964	+ gap: 16px;
	3965	+}
	3966	+
	3967	+.mxchat-embedding-model-selector-card {
	3968	+ display: flex;
	3969	+ border: 1px solid #ddd;
	3970	+ border-radius: 8px;
	3971	+ padding: 16px;
	3972	+ cursor: pointer;
	3973	+ transition: all 0.2s;
	3974	+ position: relative;
	3975	+}
	3976	+
	3977	+.mxchat-embedding-model-selector-card:hover {
	3978	+ border-color: #6750A4;
	3979	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	3980	+}
	3981	+
	3982	+.mxchat-embedding-model-selector-card.mxchat-embedding-model-selected {
	3983	+ border-color: #6750A4;
	3984	+ background-color: rgba(103, 80, 164, 0.05);
	3985	+}
	3986	+
	3987	+/* Provider-specific styles */
	3988	+.mxchat-embedding-model-provider-openai {
	3989	+ border-left: 4px solid #10A37F;
	3990	+}
	3991	+
	3992	+.mxchat-embedding-model-provider-voyage {
	3993	+ border-left: 4px solid #0055D4;
	3994	+}
	3995	+
	3996	+/* Provider-specific border color for Gemini */
	3997	+.mxchat-embedding-model-provider-gemini {
	3998	+ border-left: 4px solid #4285F4;
	3999	+}
	4000	+
	4001	+/* Icon color for Gemini */
	4002	+.mxchat-embedding-model-icon-gemini {
	4003	+ color: #4285F4;
	4004	+}
	4005	+
	4006	+.mxchat-embedding-model-selector-icon {
	4007	+ margin-right: 12px;
	4008	+ font-size: 24px;
	4009	+ display: flex;
	4010	+ align-items: center;
	4011	+ width: 25px;
	4012	+ height: 45px;
	4013	+}
	4014	+
	4015	+.mxchat-embedding-model-icon-openai {
	4016	+ color: #10A37F;
	4017	+}
	4018	+
	4019	+.mxchat-embedding-model-icon-voyage {
	4020	+ color: #0055D4;
	4021	+}
	4022	+
	4023	+.mxchat-embedding-model-selector-info {
	4024	+ flex: 1;
	4025	+}
	4026	+
	4027	+.mxchat-embedding-model-selector-title {
	4028	+ margin: 0 0 6px 0;
	4029	+ font-size: 16px;
	4030	+}
	4031	+
	4032	+.mxchat-embedding-model-selector-description {
	4033	+ margin: 0;
	4034	+ font-size: 14px;
	4035	+ color: #666;
	4036	+}
	4037	+
	4038	+.mxchat-embedding-model-selector-checkmark {
	4039	+ position: absolute;
	4040	+ top: 8px;
	4041	+ right: 8px;
	4042	+ width: 20px;
	4043	+ height: 20px;
	4044	+ background-color: #6750A4;
	4045	+ color: white;
	4046	+ border-radius: 50%;
	4047	+ display: flex;
	4048	+ align-items: center;
	4049	+ justify-content: center;
	4050	+ font-size: 12px;
	4051	+}
	4052	+
	4053	+/* Media queries for responsive design */
	4054	+@media screen and (max-width: 782px) {
	4055	+ .mxchat-embedding-model-selector-modal-content {
	4056	+ width: 95%;
	4057	+ margin: 10% auto;
	4058	+ }
	4059	+
	4060	+ .mxchat-embedding-model-selector-grid {
	4061	+ grid-template-columns: 1fr;
	4062	+ }
	4063	+
	4064	+ .mxchat-embedding-model-selector-categories {
	4065	+ overflow-x: auto;
	4066	+ padding-bottom: 10px;
	4067	+ }
	4068	+}
	4069	+
	4070	+
	4071	+/* Embedding Model Selector Button Styles */
	4072	+#mxchat_embedding_model_selector_btn.mxchat-embedding-model-selector-btn {
	4073	+ width: 100%;
	4074	+ max-width: 400px;
	4075	+ text-align: left;
	4076	+ padding: 8px 12px;
	4077	+ height: auto;
	4078	+ min-height: 36px;
	4079	+ background-color: #fff;
	4080	+ color: #2c3338;
	4081	+ border: 1px solid #8c8f94;
	4082	+ border-radius: 4px;
	4083	+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	4084	+ position: relative;
	4085	+ font-weight: normal;
	4086	+ transition: all 0.2s ease;
	4087	+ display: flex;
	4088	+ align-items: center;
	4089	+ justify-content: space-between;
	4090	+}
	4091	+
	4092	+#mxchat_embedding_model_selector_btn.mxchat-embedding-model-selector-btn:after {
	4093	+ content: "\f140";
	4094	+ font-family: dashicons;
	4095	+ position: absolute;
	4096	+ right: 10px;
	4097	+ font-size: 20px;
	4098	+ color: #666;
	4099	+}
	4100	+
	4101	+#mxchat_embedding_model_selector_btn.mxchat-embedding-model-selector-btn:hover {
	4102	+ border-color: #2271b1;
	4103	+ color: #2271b1;
	4104	+}
	4105	+
	4106	+#mxchat_embedding_model_selector_btn.mxchat-embedding-model-selector-btn:focus {
	4107	+ box-shadow: 0 0 0 1px #2271b1;
	4108	+ outline: none;
	4109	+}
	4110	+
	4111	+.mxchat-failed-urls-container {
	4112	+ margin-top: 15px;
	4113	+ border-top: 1px solid rgba(0, 0, 0, 0.1);
	4114	+ padding-top: 10px;
	4115	+}
	4116	+
	4117	+.mxchat-failed-urls-container h4 {
	4118	+ margin: 0 0 8px 0;
	4119	+ font-size: 14px;
	4120	+ color: #d63638;
	4121	+}
	4122	+
	4123	+.mxchat-failed-urls-container details {
	4124	+ margin-bottom: 10px;
	4125	+}
	4126	+
	4127	+.mxchat-failed-urls-container summary {
	4128	+ cursor: pointer;
	4129	+ font-weight: 500;
	4130	+ padding: 5px 0;
	4131	+ color: #3c434a;
	4132	+}
	4133	+
	4134	+.mxchat-failed-urls-container summary:hover {
	4135	+ color: #2271b1;
	4136	+}
	4137	+
	4138	+.mxchat-failed-urls-list {
	4139	+ margin-top: 10px;
	4140	+ max-height: 300px;
	4141	+ overflow-y: auto;
	4142	+ border: 1px solid #dcdcde;
	4143	+ border-radius: 4px;
	4144	+ background: #f8f9fa;
	4145	+}
	4146	+
	4147	+.mxchat-failed-url-item {
	4148	+ padding: 8px 12px;
	4149	+ border-bottom: 1px solid #dcdcde;
	4150	+ display: grid;
	4151	+ grid-template-columns: 1fr;
	4152	+ grid-gap: 6px;
	4153	+ font-size: 12px;
	4154	+}
	4155	+
	4156	+.mxchat-failed-url-item:last-child {
	4157	+ border-bottom: none;
	4158	+}
	4159	+
	4160	+.mxchat-failed-url-address {
	4161	+ font-weight: 500;
	4162	+ word-break: break-all;
	4163	+}
	4164	+
	4165	+.mxchat-failed-url-address a {
	4166	+ color: #2271b1;
	4167	+ text-decoration: none;
	4168	+}
	4169	+
	4170	+.mxchat-failed-url-address a:hover {
	4171	+ text-decoration: underline;
	4172	+}
	4173	+
	4174	+.mxchat-failed-url-error {
	4175	+ color: #d63638;
	4176	+}
	4177	+
	4178	+.mxchat-failed-url-time {
	4179	+ color: #50575e;
	4180	+ font-style: italic;
	4181	+ font-size: 11px;
	4182	+}
	4183	+
	4184	+.mxchat-failed-urls-more {
	4185	+ text-align: center;
	4186	+ padding: 8px;
	4187	+ background: #f0f0f1;
	4188	+ border-top: 1px solid #dcdcde;
	4189	+ color: #50575e;
	4190	+ font-style: italic;
	4191	+ font-size: 12px;
	4192	+}
	4193	+
	4194	+/* Responsive design for larger screens */
	4195	+@media screen and (min-width: 783px) {
	4196	+ .mxchat-failed-url-item {
	4197	+ grid-template-columns: 2fr 3fr 1fr;
	4198	+ align-items: center;
	4199	+ }
	4200	+}
	4201	+
	4202	+
	4203	+/* Style for addon-managed option group */
	4204	+.addon-managed-optgroup {
	4205	+ color: #888 !important;
	4206	+ font-style: italic;
	4207	+ background: #f5f5f5;
	4208	+}
	4209	+
	4210	+/* Selected text style */
	4211	+select option:disabled {
	4212	+ color: #888;
	4213	+ font-style: italic;
	4214	+}
	4215	+
	4216	+ .mxchat-rate-limits-container {
	4217	+ max-width: 900px;
	4218	+ }
	4219	+ .mxchat-rate-limit-row {
	4220	+ display: flex;
	4221	+ flex-wrap: wrap;
	4222	+ align-items: flex-start;
	4223	+ margin-bottom: 20px;
	4224	+ padding: 20px;
	4225	+ background: #fff;
	4226	+ border-radius: 8px;
	4227	+ border: 1px solid #e0e0e0;
	4228	+ box-shadow: 0 2px 4px rgba(0,0,0,0.04);
	4229	+ transition: all 0.2s ease;
	4230	+ }
	4231	+ .mxchat-rate-limit-row:hover {
	4232	+ box-shadow: 0 4px 8px rgba(0,0,0,0.08);
	4233	+ border-color: #c7c7c7;
	4234	+ }
	4235	+ .mxchat-rate-limit-role {
	4236	+ width: 160px;
	4237	+ font-weight: 600;
	4238	+ font-size: 15px;
	4239	+ margin-right: 20px;
	4240	+ padding-top: 4px;
	4241	+ color: #23282d;
	4242	+ }
	4243	+ .mxchat-rate-limit-controls-wrapper {
	4244	+ flex: 1;
	4245	+ }
	4246	+ .mxchat-rate-limit-controls {
	4247	+ display: flex;
	4248	+ flex-wrap: wrap;
	4249	+ gap: 15px;
	4250	+ align-items: center;
	4251	+ margin-bottom: 15px;
	4252	+ }
	4253	+ .mxchat-rate-limit-controls > div {
	4254	+ margin-bottom: 5px;
	4255	+ }
	4256	+ .mxchat-rate-limit-controls label {
	4257	+ display: block;
	4258	+ margin-bottom: 5px;
	4259	+ font-weight: 500;
	4260	+ color: #50575e;
	4261	+ }
	4262	+ .mxchat-rate-limit-message {
	4263	+ width: 100%;
	4264	+ margin-top: 15px;
	4265	+ }
	4266	+ .mxchat-rate-limit-message label {
	4267	+ display: block;
	4268	+ margin-bottom: 5px;
	4269	+ font-weight: 500;
	4270	+ color: #50575e;
	4271	+ }
	4272	+ .mxchat-rate-limit-message textarea {
	4273	+ width: 100%;
	4274	+ min-height: 70px;
	4275	+ padding: 8px 12px;
	4276	+ border-radius: 4px;
	4277	+ resize: vertical;
	4278	+ font-size: 14px;
	4279	+ }
	4280	+ .mxchat-rate-limit-controls select {
	4281	+ min-width: 120px;
	4282	+ padding: 6px 24px 6px 10px;
	4283	+ }
	4284	+ @media (max-width: 782px) {
	4285	+ .mxchat-rate-limit-row {
	4286	+ flex-direction: column;
	4287	+ }
	4288	+ .mxchat-rate-limit-role {
	4289	+ margin-bottom: 15px;
	4290	+ width: 100%;
	4291	+ font-size: 16px;
	4292	+ }
	4293	+ .mxchat-rate-limit-controls {
	4294	+ flex-direction: column;
	4295	+ align-items: flex-start;
	4296	+ gap: 12px;
	4297	+ }
	4298	+ .mxchat-rate-limit-controls > div {
	4299	+ width: 100%;
	4300	+ }
	4301	+ .mxchat-rate-limit-controls select {
	4302	+ width: 100%;
	4303	+ }
	4304	+ }
	4305	+
	4306	+ /* Support notification styles */
	4307	+ .support-notification {
	4308	+ background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
	4309	+ border: 2px solid #f39c12;
	4310	+ border-radius: 12px;
	4311	+ padding: 20px;
	4312	+ margin-bottom: 25px;
	4313	+ display: flex;
	4314	+ align-items: flex-start;
	4315	+ gap: 15px;
	4316	+ box-shadow: 0 4px 12px rgba(243, 156, 18, 0.15);
	4317	+ position: relative;
	4318	+ overflow: hidden;
	4319	+ }
	4320	+
	4321	+ .support-notification::before {
	4322	+ content: '';
	4323	+ position: absolute;
	4324	+ top: 0;
	4325	+ left: 0;
	4326	+ right: 0;
	4327	+ height: 4px;
	4328	+ background: linear-gradient(90deg, #f39c12, #e67e22, #f39c12);
	4329	+ background-size: 200% 100%;
	4330	+ animation: shimmer 2s ease-in-out infinite;
	4331	+ }
	4332	+
	4333	+ @keyframes shimmer {
	4334	+ 0% { background-position: -200% 0; }
	4335	+ 100% { background-position: 200% 0; }
	4336	+ }
	4337	+
	4338	+ .support-notification-icon {
	4339	+ flex-shrink: 0;
	4340	+ width: 24px;
	4341	+ height: 24px;
	4342	+ color: #e67e22;
	4343	+ margin-top: 2px;
	4344	+ }
	4345	+
	4346	+ .support-notification-content {
	4347	+ flex: 1;
	4348	+ }
	4349	+
	4350	+ .support-notification-title {
	4351	+ font-size: 18px;
	4352	+ font-weight: 600;
	4353	+ color: #8b4513;
	4354	+ margin: 0 0 8px 0;
	4355	+ display: flex;
	4356	+ align-items: center;
	4357	+ gap: 8px;
	4358	+ }
	4359	+
	4360	+ .support-notification-message {
	4361	+ font-size: 15px;
	4362	+ color: #8b4513;
	4363	+ margin: 0 0 15px 0;
	4364	+ line-height: 1.5;
	4365	+ }
	4366	+
	4367	+ .support-notification-button {
	4368	+ display: inline-flex;
	4369	+ align-items: center;
	4370	+ gap: 8px;
	4371	+ background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
	4372	+ color: white;
	4373	+ padding: 12px 20px;
	4374	+ border-radius: 8px;
	4375	+ text-decoration: none;
	4376	+ font-weight: 600;
	4377	+ font-size: 14px;
	4378	+ transition: all 0.3s ease;
	4379	+ border: none;
	4380	+ cursor: pointer;
	4381	+ box-shadow: 0 2px 8px rgba(230, 126, 34, 0.3);
	4382	+ }
	4383	+
	4384	+ .support-notification-button:hover {
	4385	+ background: linear-gradient(135deg, #d35400 0%, #c0392b 100%);
	4386	+ transform: translateY(-2px);
	4387	+ box-shadow: 0 4px 12px rgba(230, 126, 34, 0.4);
	4388	+ color: white;
	4389	+ text-decoration: none;
	4390	+ }
	4391	+
	4392	+ .support-notification-button:active {
	4393	+ transform: translateY(0);
	4394	+ }
	4395	+
	4396	+ .support-notification-button svg {
	4397	+ width: 16px;
	4398	+ height: 16px;
	4399	+ }
	4400	+
	4401	+ /* Responsive design */
	4402	+ @media (max-width: 768px) {
	4403	+ .support-notification {
	4404	+ padding: 16px;
	4405	+ gap: 12px;
	4406	+ }
	4407	+
	4408	+ .support-notification-title {
	4409	+ font-size: 16px;
	4410	+ }
	4411	+
	4412	+ .support-notification-message {
	4413	+ font-size: 14px;
	4414	+ }
	4415	+
	4416	+ .support-notification-button {
	4417	+ padding: 10px 16px;
	4418	+ font-size: 13px;
	4419	+ }
	4420	+ }
	4421	+/* Sample instructions button styles */
	4422	+.mxchat-instructions-container {
	4423	+ margin-top: 8px;
	4424	+}
	4425	+
	4426	+.mxchat-instructions-btn {
	4427	+ display: inline-flex;
	4428	+ align-items: center;
	4429	+ gap: 6px;
	4430	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	4431	+ color: white;
	4432	+ padding: 8px 14px;
	4433	+ border: none;
	4434	+ border-radius: 6px;
	4435	+ font-size: 13px;
	4436	+ font-weight: 500;
	4437	+ cursor: pointer;
	4438	+ transition: all 0.3s ease;
	4439	+ text-decoration: none;
	4440	+ box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
	4441	+}
	4442	+
	4443	+.mxchat-instructions-btn:hover {
	4444	+ background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
	4445	+ transform: translateY(-1px);
	4446	+ box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
	4447	+}
	4448	+
	4449	+.mxchat-instructions-btn:active {
	4450	+ transform: translateY(0);
	4451	+}
	4452	+
	4453	+.mxchat-instructions-btn svg {
	4454	+ width: 14px;
	4455	+ height: 14px;
	4456	+}
	4457	+
	4458	+/* Modal styles - Positioned relative to viewport */
	4459	+.mxchat-instructions-modal-overlay {
	4460	+ display: none;
	4461	+ position: fixed;
	4462	+ top: 0;
	4463	+ left: 0;
	4464	+ width: 100%;
	4465	+ height: 100%;
	4466	+ background: rgba(0, 0, 0, 0.6);
	4467	+ z-index: 999999;
	4468	+}
	4469	+
	4470	+.mxchat-instructions-modal-overlay.mxchat-instructions-show {
	4471	+ display: flex;
	4472	+ align-items: center;
	4473	+ justify-content: center;
	4474	+ padding: 20px;
	4475	+}
	4476	+
	4477	+.mxchat-instructions-modal-content {
	4478	+ background: white;
	4479	+ border-radius: 12px;
	4480	+ max-width: 700px;
	4481	+ width: 100%;
	4482	+ max-height: 90vh;
	4483	+ overflow: hidden;
	4484	+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	4485	+}
	4486	+
	4487	+.mxchat-instructions-modal-header {
	4488	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	4489	+ color: white;
	4490	+ padding: 20px 24px;
	4491	+ display: flex;
	4492	+ align-items: center;
	4493	+ justify-content: space-between;
	4494	+}
	4495	+
	4496	+.mxchat-instructions-modal-title {
	4497	+ font-size: 18px;
	4498	+ font-weight: 600;
	4499	+ margin: 0;
	4500	+ display: flex;
	4501	+ align-items: center;
	4502	+ gap: 10px;
	4503	+}
	4504	+
	4505	+.mxchat-instructions-modal-close {
	4506	+ background: rgba(255, 255, 255, 0.2);
	4507	+ border: none;
	4508	+ color: white;
	4509	+ width: 32px;
	4510	+ height: 32px;
	4511	+ border-radius: 6px;
	4512	+ cursor: pointer;
	4513	+ display: flex;
	4514	+ align-items: center;
	4515	+ justify-content: center;
	4516	+ transition: background 0.2s ease;
	4517	+}
	4518	+
	4519	+.mxchat-instructions-modal-close:hover {
	4520	+ background: rgba(255, 255, 255, 0.3);
	4521	+}
	4522	+
	4523	+.mxchat-instructions-modal-body {
	4524	+ padding: 24px;
	4525	+ overflow-y: auto;
	4526	+ max-height: calc(90vh - 140px);
	4527	+}
	4528	+
	4529	+.mxchat-instructions-content {
	4530	+ background: #f8fafc;
	4531	+ border: 2px solid #e2e8f0;
	4532	+ border-radius: 8px;
	4533	+ padding: 20px;
	4534	+ font-family: 'Courier New', Monaco, monospace;
	4535	+ font-size: 13px;
	4536	+ line-height: 1.6;
	4537	+ color: #2d3748;
	4538	+ white-space: pre-wrap;
	4539	+ word-wrap: break-word;
	4540	+}
	4541	+
	4542	+.mxchat-instructions-copy-btn {
	4543	+ margin-top: 16px;
	4544	+ background: #48bb78;
	4545	+ color: white;
	4546	+ border: none;
	4547	+ padding: 10px 16px;
	4548	+ border-radius: 6px;
	4549	+ font-size: 14px;
	4550	+ font-weight: 500;
	4551	+ cursor: pointer;
	4552	+ display: inline-flex;
	4553	+ align-items: center;
	4554	+ gap: 8px;
	4555	+ transition: all 0.2s ease;
	4556	+}
	4557	+
	4558	+.mxchat-instructions-copy-btn:hover {
	4559	+ background: #38a169;
	4560	+ transform: translateY(-1px);
	4561	+}
	4562	+
	4563	+.mxchat-instructions-copy-btn svg {
	4564	+ width: 16px;
	4565	+ height: 16px;
	4566	+}
	4567	+
	4568	+.mxchat-instructions-modal-footer {
	4569	+ padding: 16px 24px;
	4570	+ background: #f7fafc;
	4571	+ border-top: 1px solid #e2e8f0;
	4572	+ text-align: right;
	4573	+}
	4574	+
	4575	+.mxchat-instructions-btn-secondary {
	4576	+ background: #e2e8f0;
	4577	+ color: #4a5568;
	4578	+ border: none;
	4579	+ padding: 8px 16px;
	4580	+ border-radius: 6px;
	4581	+ font-size: 14px;
	4582	+ cursor: pointer;
	4583	+ transition: background 0.2s ease;
	4584	+}
	4585	+
	4586	+.mxchat-instructions-btn-secondary:hover {
	4587	+ background: #cbd5e0;
	4588	+}
	4589	+
	4590	+/* Responsive design */
	4591	+@media (max-width: 782px) {
	4592	+ .mxchat-instructions-modal-overlay.mxchat-instructions-show {
	4593	+ padding: 10px;
	4594	+ }
	4595	+
	4596	+ .mxchat-instructions-modal-content {
	4597	+ max-height: 95vh;
	4598	+ }
	4599	+
	4600	+ .mxchat-instructions-modal-header {
	4601	+ padding: 16px 20px;
	4602	+ }
	4603	+
	4604	+ .mxchat-instructions-modal-body {
	4605	+ padding: 20px;
	4606	+ max-height: calc(95vh - 120px);
	4607	+ }
	4608	+
	4609	+ .mxchat-instructions-content {
	4610	+ font-size: 12px;
	4611	+ padding: 16px;
	4612	+ }
	4613	+}
	4614	+
	4615	+
	4616	+
	4617	+
	4618	+
	4619	+/* Completion Card - Modern Theme */
	4620	+.mxchat-completion-card {
	4621	+ margin: 20px 0;
	4622	+ background: #ffffff;
	4623	+ border-radius: 12px;
	4624	+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
	4625	+ overflow: hidden;
	4626	+ transition: all 0.3s ease;
	4627	+ border: 1px solid rgba(0, 0, 0, 0.06);
	4628	+}
	4629	+
	4630	+.mxchat-completion-card:hover {
	4631	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.08);
	4632	+}
	4633	+
	4634	+/* Header Section */
	4635	+.mxchat-completion-header {
	4636	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	4637	+ padding: 24px;
	4638	+ display: flex;
	4639	+ align-items: center;
	4640	+ gap: 16px;
	4641	+}
	4642	+
	4643	+.mxchat-completion-icon {
	4644	+ width: 48px;
	4645	+ height: 48px;
	4646	+ background: rgba(255, 255, 255, 0.2);
	4647	+ border-radius: 12px;
	4648	+ display: flex;
	4649	+ align-items: center;
	4650	+ justify-content: center;
	4651	+ flex-shrink: 0;
	4652	+}
	4653	+
	4654	+.mxchat-completion-icon svg {
	4655	+ color: #ffffff;
	4656	+ width: 28px;
	4657	+ height: 28px;
	4658	+}
	4659	+
	4660	+.mxchat-completion-title h3 {
	4661	+ margin: 0;
	4662	+ color: #ffffff;
	4663	+ font-size: 20px;
	4664	+ font-weight: 600;
	4665	+ letter-spacing: -0.02em;
	4666	+}
	4667	+
	4668	+.mxchat-completion-time {
	4669	+ margin: 4px 0 0 0;
	4670	+ color: rgba(255, 255, 255, 0.8);
	4671	+ font-size: 14px;
	4672	+}
	4673	+
	4674	+/* Summary Section */
	4675	+.mxchat-completion-summary {
	4676	+ padding: 24px;
	4677	+ border-bottom: 1px solid #f0f0f1;
	4678	+}
	4679	+
	4680	+.mxchat-completion-summary h4 {
	4681	+ margin: 0 0 16px 0;
	4682	+ color: #1d2327;
	4683	+ font-size: 16px;
	4684	+ font-weight: 600;
	4685	+}
	4686	+
	4687	+.mxchat-summary-stats {
	4688	+ display: grid;
	4689	+ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	4690	+ gap: 12px;
	4691	+}
	4692	+
	4693	+.mxchat-stat-card {
	4694	+ padding: 20px;
	4695	+ border-radius: 12px;
	4696	+ display: flex;
	4697	+ align-items: center;
	4698	+ gap: 16px;
	4699	+ transition: all 0.2s ease;
	4700	+}
	4701	+
	4702	+.mxchat-stat-card:hover {
	4703	+ transform: translateY(-2px);
	4704	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	4705	+}
	4706	+
	4707	+.mxchat-stat-card .stat-icon {
	4708	+ font-size: 32px;
	4709	+ line-height: 1;
	4710	+ opacity: 0.9;
	4711	+}
	4712	+
	4713	+.mxchat-stat-card .stat-content {
	4714	+ flex: 1;
	4715	+ text-align: left;
	4716	+}
	4717	+
	4718	+.mxchat-stat-label {
	4719	+ display: block;
	4720	+ font-size: 12px;
	4721	+ color: #646970;
	4722	+ font-weight: 500;
	4723	+ text-transform: uppercase;
	4724	+ letter-spacing: 0.5px;
	4725	+ margin-bottom: 4px;
	4726	+}
	4727	+
	4728	+.mxchat-stat-value {
	4729	+ display: block;
	4730	+ font-size: 28px;
	4731	+ font-weight: 700;
	4732	+ color: #1d2327;
	4733	+ line-height: 1.2;
	4734	+}
	4735	+
	4736	+.mxchat-stat-sublabel {
	4737	+ display: block;
	4738	+ font-size: 11px;
	4739	+ color: #8c8f94;
	4740	+ margin-top: 4px;
	4741	+}
	4742	+
	4743	+/* Stat Card Variants */
	4744	+.mxchat-stat-primary {
	4745	+ background: linear-gradient(135deg, #f6f7f7 0%, #ffffff 100%);
	4746	+ border: 1px solid #e5e7eb;
	4747	+}
	4748	+
	4749	+.mxchat-stat-accent {
	4750	+ border: 1px solid #e9d5ff;
	4751	+}
	4752	+
	4753	+.mxchat-stat-accent .stat-value {
	4754	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	4755	+ -webkit-background-clip: text;
	4756	+ -webkit-text-fill-color: transparent;
	4757	+ background-clip: text;
	4758	+}
	4759	+
	4760	+.mxchat-stat-success {
	4761	+ background: #e6f5e6;
	4762	+}
	4763	+
	4764	+.mxchat-stat-success .mxchat-stat-value {
	4765	+ color: #00a32a;
	4766	+}
	4767	+
	4768	+.mxchat-stat-failed {
	4769	+ background: #fef1f1;
	4770	+}
	4771	+
	4772	+.mxchat-stat-failed .mxchat-stat-value {
	4773	+ color: #d63638;
	4774	+}
	4775	+
	4776	+/* Metrics Dashboard */
	4777	+.mxchat-metrics-dashboard {
	4778	+ background: #ffffff;
	4779	+ border-radius: 16px;
	4780	+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	4781	+ margin-bottom: 24px;
	4782	+ overflow: hidden;
	4783	+}
	4784	+
	4785	+.mxchat-metrics-tabs {
	4786	+ display: flex;
	4787	+ gap: 0;
	4788	+ background: #f6f7f7;
	4789	+ border-bottom: 1px solid #e5e7eb;
	4790	+ padding: 0;
	4791	+}
	4792	+
	4793	+.mxchat-metrics-tab {
	4794	+ flex: 1;
	4795	+ display: flex;
	4796	+ align-items: center;
	4797	+ justify-content: center;
	4798	+ gap: 8px;
	4799	+ padding: 16px 24px;
	4800	+ background: transparent;
	4801	+ border: none;
	4802	+ border-bottom: 3px solid transparent;
	4803	+ cursor: pointer;
	4804	+ font-size: 14px;
	4805	+ font-weight: 500;
	4806	+ color: #646970;
	4807	+ transition: all 0.2s ease;
	4808	+ position: relative;
	4809	+}
	4810	+
	4811	+.mxchat-metrics-tab:hover {
	4812	+ background: rgba(255, 255, 255, 0.5);
	4813	+ color: #1d2327;
	4814	+}
	4815	+
	4816	+.mxchat-metrics-tab.active {
	4817	+ background: #ffffff;
	4818	+ color: #1d2327;
	4819	+ border-bottom-color: #667eea;
	4820	+}
	4821	+
	4822	+.mxchat-metrics-tab .tab-icon {
	4823	+ font-size: 18px;
	4824	+ line-height: 1;
	4825	+}
	4826	+
	4827	+.mxchat-metrics-tab .tab-label {
	4828	+ font-weight: 600;
	4829	+}
	4830	+
	4831	+.mxchat-metrics-content {
	4832	+ position: relative;
	4833	+}
	4834	+
	4835	+.mxchat-metrics-panel {
	4836	+ display: none;
	4837	+ padding: 24px;
	4838	+ animation: mxchat-fadeIn 0.3s ease;
	4839	+}
	4840	+
	4841	+.mxchat-metrics-panel.active {
	4842	+ display: block;
	4843	+}
	4844	+
	4845	+@keyframes mxchat-fadeIn {
	4846	+ from {
	4847	+ opacity: 0;
	4848	+ transform: translateY(10px);
	4849	+ }
	4850	+ to {
	4851	+ opacity: 1;
	4852	+ transform: translateY(0);
	4853	+ }
	4854	+}
	4855	+
	4856	+/* Activity Layout */
	4857	+.mxchat-activity-layout {
	4858	+ display: grid;
	4859	+ gap: 24px;
	4860	+}
	4861	+
	4862	+.mxchat-activity-stats {
	4863	+ display: grid;
	4864	+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	4865	+ gap: 16px;
	4866	+}
	4867	+
	4868	+/* Chart Container */
	4869	+.mxchat-chart-container {
	4870	+ background: #f9fafb;
	4871	+ border-radius: 12px;
	4872	+ padding: 24px;
	4873	+ border: 1px solid #e5e7eb;
	4874	+}
	4875	+
	4876	+.mxchat-chart-title {
	4877	+ margin: 0 0 20px 0;
	4878	+ font-size: 16px;
	4879	+ font-weight: 600;
	4880	+ color: #1d2327;
	4881	+ display: flex;
	4882	+ align-items: center;
	4883	+ gap: 8px;
	4884	+}
	4885	+
	4886	+#mxchat-activity-chart {
	4887	+ max-height: 300px;
	4888	+ width: 100% !important;
	4889	+ height: auto !important;
	4890	+}
	4891	+
	4892	+/* Insights Grid */
	4893	+.mxchat-insights-grid {
	4894	+ display: grid;
	4895	+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	4896	+ gap: 20px;
	4897	+}
	4898	+
	4899	+.mxchat-insight-card {
	4900	+ background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
	4901	+ border: 1px solid #e5e7eb;
	4902	+ border-radius: 12px;
	4903	+ padding: 20px;
	4904	+ transition: all 0.2s ease;
	4905	+}
	4906	+
	4907	+.mxchat-insight-card:hover {
	4908	+ transform: translateY(-2px);
	4909	+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	4910	+ border-color: #d1d5db;
	4911	+}
	4912	+
	4913	+.insight-header {
	4914	+ display: flex;
	4915	+ align-items: center;
	4916	+ gap: 12px;
	4917	+ margin-bottom: 16px;
	4918	+ padding-bottom: 12px;
	4919	+ border-bottom: 1px solid #e5e7eb;
	4920	+}
	4921	+
	4922	+.insight-icon {
	4923	+ font-size: 24px;
	4924	+ line-height: 1;
	4925	+}
	4926	+
	4927	+.insight-header h3 {
	4928	+ margin: 0;
	4929	+ font-size: 14px;
	4930	+ font-weight: 600;
	4931	+ color: #374151;
	4932	+ text-transform: uppercase;
	4933	+ letter-spacing: 0.5px;
	4934	+}
	4935	+
	4936	+.insight-content {
	4937	+ text-align: left;
	4938	+}
	4939	+
	4940	+.insight-value {
	4941	+ font-size: 32px;
	4942	+ font-weight: 700;
	4943	+ color: #1d2327;
	4944	+ margin-bottom: 8px;
	4945	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	4946	+ -webkit-background-clip: text;
	4947	+ -webkit-text-fill-color: transparent;
	4948	+ background-clip: text;
	4949	+ padding-bottom: 4px; /* Prevent gradient text clipping */
	4950	+}
	4951	+
	4952	+.insight-description {
	4953	+ font-size: 12px;
	4954	+ color: #374151;
	4955	+ line-height: 1.5;
	4956	+}
	4957	+
	4958	+.insight-breakdown {
	4959	+ display: flex;
	4960	+ flex-direction: column;
	4961	+ gap: 12px;
	4962	+}
	4963	+
	4964	+.breakdown-item {
	4965	+ display: flex;
	4966	+ justify-content: space-between;
	4967	+ align-items: center;
	4968	+ padding: 10px 12px;
	4969	+ background: #f9fafb;
	4970	+ border-radius: 6px;
	4971	+ border: 1px solid #e5e7eb;
	4972	+}
	4973	+
	4974	+.breakdown-label {
	4975	+ font-size: 13px;
	4976	+ color: #6b7280;
	4977	+ font-weight: 500;
	4978	+}
	4979	+
	4980	+.breakdown-value {
	4981	+ font-size: 16px;
	4982	+ font-weight: 700;
	4983	+ color: #1d2327;
	4984	+}
	4985	+
	4986	+/* Status Badges */
	4987	+.insight-status {
	4988	+ display: flex;
	4989	+ align-items: center;
	4990	+}
	4991	+
	4992	+/* Reset gradient text styling for status badges */
	4993	+.insight-value.insight-status {
	4994	+ background: none;
	4995	+ -webkit-background-clip: unset;
	4996	+ -webkit-text-fill-color: unset;
	4997	+ background-clip: unset;
	4998	+}
	4999	+
	5000	+.status-badge {
	5001	+ display: inline-block;
	5002	+ padding: 6px 12px;
	5003	+ border-radius: 20px;
	5004	+ font-size: 13px;
	5005	+ font-weight: 600;
	5006	+ text-transform: uppercase;
	5007	+ letter-spacing: 0.5px;
	5008	+}
	5009	+
	5010	+.status-active {
	5011	+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	5012	+ color: #ffffff !important;
	5013	+ -webkit-text-fill-color: #ffffff !important;
	5014	+}
	5015	+
	5016	+.status-moderate {
	5017	+ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
	5018	+ color: #ffffff !important;
	5019	+ -webkit-text-fill-color: #ffffff !important;
	5020	+}
	5021	+
	5022	+.status-quiet {
	5023	+ background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
	5024	+ color: #ffffff !important;
	5025	+ -webkit-text-fill-color: #ffffff !important;
	5026	+}
	5027	+
	5028	+/* Responsive Design */
	5029	+@media (max-width: 768px) {
	5030	+ .mxchat-metrics-tabs {
	5031	+ flex-direction: column;
	5032	+ }
	5033	+
	5034	+ .mxchat-metrics-tab {
	5035	+ border-bottom: none;
	5036	+ border-left: 3px solid transparent;
	5037	+ }
	5038	+
	5039	+ .mxchat-metrics-tab.active {
	5040	+ border-bottom: none;
	5041	+ border-left-color: #667eea;
	5042	+ }
	5043	+
	5044	+ .mxchat-activity-stats,
	5045	+ .mxchat-insights-grid {
	5046	+ grid-template-columns: 1fr;
	5047	+ }
	5048	+
	5049	+ .mxchat-stats-grid {
	5050	+ grid-template-columns: 1fr;
	5051	+ }
	5052	+}
	5053	+
	5054	+/* Failed URLs Section */
	5055	+.mxchat-failed-urls-section {
	5056	+ padding: 24px;
	5057	+ background: #fafafa;
	5058	+ border-top: 1px solid #f0f0f1;
	5059	+}
	5060	+
	5061	+.mxchat-failed-urls-section h4 {
	5062	+ margin: 0 0 16px 0;
	5063	+ color: #d63638;
	5064	+ font-size: 16px;
	5065	+ font-weight: 600;
	5066	+ display: flex;
	5067	+ align-items: center;
	5068	+ gap: 8px;
	5069	+}
	5070	+
	5071	+.mxchat-icon-warning {
	5072	+ flex-shrink: 0;
	5073	+}
	5074	+
	5075	+.mxchat-failed-urls-table-wrapper {
	5076	+ max-height: 300px;
	5077	+ overflow-y: auto;
	5078	+ background: #ffffff;
	5079	+ border-radius: 8px;
	5080	+ border: 1px solid #e0e0e0;
	5081	+}
	5082	+
	5083	+.mxchat-failed-urls-table {
	5084	+ width: 100%;
	5085	+ border-collapse: collapse;
	5086	+}
	5087	+
	5088	+.mxchat-failed-urls-table thead {
	5089	+ position: sticky;
	5090	+ top: 0;
	5091	+ background: #f6f7f7;
	5092	+ z-index: 1;
	5093	+}
	5094	+
	5095	+.mxchat-failed-urls-table th {
	5096	+ text-align: left;
	5097	+ padding: 12px 16px;
	5098	+ font-weight: 600;
	5099	+ font-size: 13px;
	5100	+ color: #1d2327;
	5101	+ text-transform: uppercase;
	5102	+ letter-spacing: 0.5px;
	5103	+ border-bottom: 2px solid #e0e0e0;
	5104	+}
	5105	+
	5106	+.mxchat-failed-urls-table tbody tr {
	5107	+ transition: background-color 0.2s ease;
	5108	+}
	5109	+
	5110	+.mxchat-failed-urls-table tbody tr:hover {
	5111	+ background-color: #f6f7f7;
	5112	+}
	5113	+
	5114	+.mxchat-failed-urls-table td {
	5115	+ padding: 12px 16px;
	5116	+ border-bottom: 1px solid #f0f0f1;
	5117	+ font-size: 14px;
	5118	+}
	5119	+
	5120	+.mxchat-url-cell {
	5121	+ word-break: break-all;
	5122	+}
	5123	+
	5124	+.mxchat-url-cell a {
	5125	+ color: #667eea;
	5126	+ text-decoration: none;
	5127	+ transition: color 0.2s ease;
	5128	+}
	5129	+
	5130	+.mxchat-url-cell a:hover {
	5131	+ color: #764ba2;
	5132	+ text-decoration: underline;
	5133	+}
	5134	+
	5135	+.mxchat-error-cell {
	5136	+ color: #d63638;
	5137	+}
	5138	+
	5139	+.mxchat-time-cell {
	5140	+ color: #646970;
	5141	+ white-space: nowrap;
	5142	+}
	5143	+
	5144	+/* Action Buttons */
	5145	+.mxchat-completion-actions {
	5146	+ padding: 24px;
	5147	+ display: flex;
	5148	+ gap: 12px;
	5149	+ justify-content: flex-end;
	5150	+ background: #fafafa;
	5151	+}
	5152	+
	5153	+.mxchat-btn {
	5154	+ display: inline-flex;
	5155	+ align-items: center;
	5156	+ gap: 8px;
	5157	+ padding: 10px 20px;
	5158	+ border: none;
	5159	+ border-radius: 6px;
	5160	+ font-size: 14px;
	5161	+ font-weight: 500;
	5162	+ cursor: pointer;
	5163	+ transition: all 0.2s ease;
	5164	+ text-decoration: none;
	5165	+}
	5166	+
	5167	+.mxchat-btn svg {
	5168	+ width: 16px;
	5169	+ height: 16px;
	5170	+}
	5171	+
	5172	+.mxchat-btn-primary {
	5173	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	5174	+ color: #ffffff;
	5175	+}
	5176	+
	5177	+.mxchat-btn-primary:hover {
	5178	+ transform: translateY(-1px);
	5179	+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
	5180	+}
	5181	+
	5182	+.mxchat-btn-secondary {
	5183	+ background: #ffffff;
	5184	+ color: #667eea;
	5185	+ border: 1px solid #667eea;
	5186	+}
	5187	+
	5188	+.mxchat-btn-secondary:hover {
	5189	+ background: #f6f7ff;
	5190	+ transform: translateY(-1px);
	5191	+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
	5192	+}
	5193	+
	5194	+.mxchat-btn:disabled {
	5195	+ opacity: 0.5;
	5196	+ cursor: not-allowed;
	5197	+}
	5198	+
	5199	+.mxchat-btn:disabled:hover {
	5200	+ transform: none;
	5201	+ box-shadow: none;
	5202	+}
	5203	+
	5204	+/* Responsive adjustments */
	5205	+@media (max-width: 768px) {
	5206	+ .mxchat-summary-stats {
	5207	+ grid-template-columns: 1fr;
	5208	+ }
	5209	+
	5210	+ .mxchat-completion-actions {
	5211	+ flex-direction: column;
	5212	+ }
	5213	+
	5214	+ .mxchat-btn {
	5215	+ width: 100%;
	5216	+ justify-content: center;
	5217	+ }
	5218	+}
	5219	+
	5220	+/* Scrollbar styling for failed URLs table */
	5221	+.mxchat-failed-urls-table-wrapper::-webkit-scrollbar {
	5222	+ width: 8px;
	5223	+}
	5224	+
	5225	+.mxchat-failed-urls-table-wrapper::-webkit-scrollbar-track {
	5226	+ background: #f0f0f1;
	5227	+ border-radius: 4px;
	5228	+}
	5229	+
	5230	+.mxchat-failed-urls-table-wrapper::-webkit-scrollbar-thumb {
	5231	+ background: #c3c4c7;
	5232	+ border-radius: 4px;
	5233	+}
	5234	+
	5235	+.mxchat-failed-urls-table-wrapper::-webkit-scrollbar-thumb:hover {
	5236	+ background: #a7aaad;
	5237	+}
	5238	+
	5239	+
	5240	+/* Live Agent Disabled Notice Styles - Enhanced design */
	5241	+.mxchat-live-agent-disabled-notice {
	5242	+ margin-bottom: 20px;
	5243	+}
	5244	+
	5245	+.mxchat-live-agent-disabled-notice .mxchat-pro-notification {
	5246	+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	5247	+ border-radius: 12px;
	5248	+ padding: 24px 24px 24px 24px;
	5249	+ color: white;
	5250	+ position: relative;
	5251	+ box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
	5252	+ border: 1px solid rgba(255, 255, 255, 0.1);
	5253	+}
	5254	+
	5255	+.mxchat-dismiss-btn {
	5256	+ position: absolute;
	5257	+ top: 16px;
	5258	+ right: 16px;
	5259	+ background: rgba(255, 255, 255, 0.1);
	5260	+ border: 1px solid rgba(255, 255, 255, 0.2);
	5261	+ border-radius: 6px;
	5262	+ color: rgba(255, 255, 255, 0.8);
	5263	+ cursor: pointer;
	5264	+ padding: 8px;
	5265	+ display: flex;
	5266	+ align-items: center;
	5267	+ justify-content: center;
	5268	+ transition: all 0.2s ease;
	5269	+ backdrop-filter: blur(10px);
	5270	+}
	5271	+
	5272	+.mxchat-dismiss-btn:hover {
	5273	+ background: rgba(255, 255, 255, 0.2);
	5274	+ color: white;
	5275	+ transform: scale(1.05);
	5276	+}
	5277	+
	5278	+.mxchat-dismiss-btn:active {
	5279	+ transform: scale(0.95);
	5280	+}
	5281	+
	5282	+.mxchat-live-agent-content {
	5283	+ padding-right: 60px; /* Space for dismiss button */
	5284	+}
	5285	+
	5286	+.mxchat-live-agent-content h3 {
	5287	+ margin: 0 0 16px 0;
	5288	+ font-size: 20px;
	5289	+ font-weight: 600;
	5290	+ color: white;
	5291	+ display: flex;
	5292	+ align-items: center;
	5293	+ gap: 8px;
	5294	+}
	5295	+
	5296	+.mxchat-live-agent-content p {
	5297	+ margin: 0;
	5298	+ font-size: 15px;
	5299	+ line-height: 1.6;
	5300	+ opacity: 0.95;
	5301	+ color: rgba(255, 255, 255, 0.95);
	5302	+}
	5303	+
	5304	+.mxchat-live-agent-content strong {
	5305	+ color: #fff;
	5306	+ font-weight: 600;
	5307	+ background: rgba(255, 255, 255, 0.1);
	5308	+ padding: 2px 6px;
	5309	+ border-radius: 4px;
	5310	+ font-size: 14px;
	5311	+}
	5312	+
	5313	+/* Theme Migration Notice Styles */
	5314	+.mxchat-theme-migration-notice {
	5315	+ margin-bottom: 20px;
	5316	+}
	5317	+
	5318	+.mxchat-theme-migration-notice .mxchat-pro-notification {
	5319	+ background: linear-gradient(135deg, #f472b6 0%, #a855f7 50%, #6366f1 100%);
	5320	+ border-radius: 12px;
	5321	+ padding: 24px 24px 24px 24px;
	5322	+ color: white;
	5323	+ position: relative;
	5324	+ box-shadow: 0 8px 32px rgba(244, 114, 182, 0.3);
	5325	+ border: 1px solid rgba(255, 255, 255, 0.1);
	5326	+}
	5327	+
	5328	+.mxchat-theme-migration-content {
	5329	+ padding-right: 60px; /* Space for dismiss button */
	5330	+}
	5331	+
	5332	+.mxchat-theme-migration-content h3 {
	5333	+ margin: 0 0 16px 0;
	5334	+ font-size: 20px;
	5335	+ font-weight: 600;
	5336	+ color: white;
	5337	+ display: flex;
	5338	+ align-items: center;
	5339	+ gap: 8px;
	5340	+}
	5341	+
	5342	+.mxchat-theme-migration-content p {
	5343	+ margin: 0;
	5344	+ font-size: 15px;
	5345	+ line-height: 1.6;
	5346	+ opacity: 0.95;
	5347	+ color: rgba(255, 255, 255, 0.95);
	5348	+}
	5349	+
	5350	+.mxchat-theme-migration-content strong {
	5351	+ color: #fff;
	5352	+ font-weight: 600;
	5353	+ background: rgba(255, 255, 255, 0.15);
	5354	+ padding: 2px 8px;
	5355	+ border-radius: 4px;
	5356	+ font-size: 14px;
	5357	+}
	5358	+
	5359	+.mxchat-processing-controls {
	5360	+ display: flex;
	5361	+ gap: 10px;
	5362	+ align-items: center;
	5363	+}
	5364	+
	5365	+/* Status Card Container */
	5366	+.mxchat-status-card {
	5367	+ background: #fff;
	5368	+ border: 1px solid #ddd;
	5369	+ border-radius: 8px;
	5370	+ padding: 20px;
	5371	+ margin-bottom: 20px;
	5372	+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	5373	+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	5374	+}
	5375	+
	5376	+/* Status Header */
	5377	+.mxchat-status-header {
	5378	+ display: flex;
	5379	+ align-items: center;
	5380	+ justify-content: space-between;
	5381	+ margin-bottom: 15px;
	5382	+ flex-wrap: wrap;
	5383	+ gap: 10px;
	5384	+}
	5385	+
	5386	+.mxchat-status-header h4 {
	5387	+ margin: 0;
	5388	+ font-size: 18px;
	5389	+ font-weight: 600;
	5390	+ color: #333;
	5391	+}
	5392	+
	5393	+.mxchat-status-header h5 {
	5394	+ margin: 0 0 10px 0;
	5395	+ font-size: 16px;
	5396	+ font-weight: 600;
	5397	+ color: #333;
	5398	+}
	5399	+
	5400	+/* Dismiss Button */
	5401	+.mxchat-dismiss-button {
	5402	+ padding: 6px 12px;
	5403	+ background: #dc3545;
	5404	+ color: white;
	5405	+ border: none;
	5406	+ border-radius: 4px;
	5407	+ cursor: pointer;
	5408	+ font-size: 12px;
	5409	+ font-weight: 500;
	5410	+ transition: background-color 0.2s ease;
	5411	+}
	5412	+
	5413	+.mxchat-dismiss-button:hover {
	5414	+ background: #c82333;
	5415	+}
	5416	+
	5417	+.mxchat-dismiss-button:active {
	5418	+ transform: translateY(1px);
	5419	+}
	5420	+
	5421	+/* Process Batch Button */
	5422	+.mxchat-manual-batch-btn {
	5423	+ padding: 8px 16px;
	5424	+ background: #007cba;
	5425	+ color: white;
	5426	+ border: none;
	5427	+ border-radius: 4px;
	5428	+ cursor: pointer;
	5429	+ font-size: 13px;
	5430	+ font-weight: 500;
	5431	+ transition: all 0.2s ease;
	5432	+ text-decoration: none;
	5433	+ display: inline-block;
	5434	+}
	5435	+
	5436	+.mxchat-manual-batch-btn:hover {
	5437	+ background: #005a87;
	5438	+ color: white;
	5439	+ text-decoration: none;
	5440	+}
	5441	+
	5442	+.mxchat-manual-batch-btn:active {
	5443	+ transform: translateY(1px);
	5444	+}
	5445	+
	5446	+.mxchat-manual-batch-btn:focus {
	5447	+ outline: 2px solid #007cba;
	5448	+ outline-offset: 2px;
	5449	+}
	5450	+
	5451	+
	5452	+
	5453	+
	5454	+
	5455	+/* MxChat Plugin Activation Page Styles */
	5456	+
	5457	+.mxchat-license-details {
	5458	+ background: #f9f9f9;
	5459	+ padding: 15px;
	5460	+ border-radius: 5px;
	5461	+ margin-top: 15px;
	5462	+ border-left: 4px solid #2271b1;
	5463	+}
	5464	+
	5465	+.mxchat-license-details p {
	5466	+ margin: 8px 0;
	5467	+}
	5468	+
	5469	+.mxchat-license-details small {
	5470	+ color: #666;
	5471	+}
	5472	+
	5473	+.mxchat-license-details a {
	5474	+ color: #2271b1;
	5475	+ text-decoration: none;
	5476	+}
	5477	+
	5478	+.mxchat-license-details a:hover {
	5479	+ text-decoration: underline;
	5480	+}
	5481	+
	5482	+/* Domain linking styles */
	5483	+#link-domain-button {
	5484	+ background: #2271b1;
	5485	+ color: white;
	5486	+ border: none;
	5487	+ padding: 8px 16px;
	5488	+ border-radius: 4px;
	5489	+ cursor: pointer;
	5490	+ font-size: 13px;
	5491	+}
	5492	+
	5493	+#link-domain-button:hover {
	5494	+ background: #1a5a8a;
	5495	+}
	5496	+
	5497	+#link-domain-button:disabled {
	5498	+ background: #ccc;
	5499	+ cursor: not-allowed;
	5500	+}
	5501	+
	5502	+#domain-link-status {
	5503	+ font-size: 13px;
	5504	+ font-weight: 500;
	5505	+}
	5506	+
	5507	+/* Status badges */
	5508	+.mxchat-status-badge.active {
	5509	+ color: #2d8f47;
	5510	+ background: #d4edda;
	5511	+ padding: 4px 8px;
	5512	+ border-radius: 4px;
	5513	+ font-size: 12px;
	5514	+ font-weight: 600;
	5515	+}
	5516	+
	5517	+.mxchat-status-badge.inactive {
	5518	+ color: #842029;
	5519	+ background: #f8d7da;
	5520	+ padding: 4px 8px;
	5521	+ border-radius: 4px;
	5522	+ font-size: 12px;
	5523	+ font-weight: 600;
	5524	+}
	5525	+
	5526	+/* Notice styles for domain linking */
	5527	+.notice.notice-info {
	5528	+ background: #e7f3ff;
	5529	+ border-left-color: #2271b1;
	5530	+ z-index: 100000000000000000;
	5531	+ position: relative;
	5532	+}
	5533	+
	5534	+.notice.notice-success {
	5535	+ background: #d1eddb;
	5536	+ border-left-color: #2d8f47;
	5537	+}
	5538	+
	5539	+/* Animation for status changes */
	5540	+.license-status-updating {
	5541	+ opacity: 0.6;
	5542	+ transition: opacity 0.3s ease;
	5543	+}
	5544	+
	5545	+/* Spinner for domain linking */
	5546	+.domain-link-spinner {
	5547	+ display: inline-block;
	5548	+ width: 16px;
	5549	+ height: 16px;
	5550	+ border: 2px solid #f3f3f3;
	5551	+ border-top: 2px solid #2271b1;
	5552	+ border-radius: 50%;
	5553	+ animation: spin 1s linear infinite;
	5554	+ margin-left: 8px;
	5555	+}
	5556	+
	5557	+@keyframes spin {
	5558	+ 0% { transform: rotate(0deg); }
	5559	+ 100% { transform: rotate(360deg); }
	5560	+}
	5561	+
	5562	+
	5563	+
	5564	+.mxchat-pro-notification .old-price {
	5565	+ text-decoration: line-through;
	5566	+ color: #888;
	5567	+}
	5568	+.mxchat-pro-notification .new-price {
	5569	+ font-weight: bold;
	5570	+ color: #d9534f; /* red for urgency */
	5571	+}
	5572	+
	5573	+
	5574	+
	5575	+ #mxchat-test-streaming-btn:disabled {
	5576	+ opacity: 0.6;
	5577	+ cursor: not-allowed;
	5578	+ }
	5579	+ #mxchat-test-streaming-result {
	5580	+ padding: 8px 12px;
	5581	+ border-radius: 4px;
	5582	+ display: none;
	5583	+ }
	5584	+ #mxchat-test-streaming-result:not(:empty) {
	5585	+ display: block;
	5586	+ background: #f0f0f1;
	5587	+ border-left: 4px solid #72aee6;
	5588	+ }
	5589	+
	5590	+
	5591	+ /* Hide email-dependent fields by default */
	5592	+tr:has(#email_blocker_header_content),
	5593	+tr:has(#email_blocker_button_text),
	5594	+tr:has(#enable_name_field),
	5595	+tr:has(#name_field_placeholder) {
	5596	+ display: none;
	5597	+}
	5598	+
	5599	+/* Show them when email block is enabled */
	5600	+body.email-block-enabled tr:has(#email_blocker_header_content),
	5601	+body.email-block-enabled tr:has(#email_blocker_button_text),
	5602	+body.email-block-enabled tr:has(#enable_name_field),
	5603	+body.email-block-enabled tr:has(#name_field_placeholder) {
	5604	+ display: table-row;
	5605	+}
	5606	+
	5607	+/* Style for email-dependent fields */
	5608	+.email-dependent-field {
	5609	+ background-color: #f8f9fa;
	5610	+ border-left: 4px solid #0073aa;
	5611	+ padding-left: 15px;
	5612	+ margin-left: 10px;
	5613	+}
	5614	+
	5615	+.email-dependent-field td,
	5616	+.email-dependent-field th {
	5617	+ background-color: #f8f9fa;
	5618	+}
	5619	+
	5620	+
	5621	+/* NEW: Role restriction styles */
	5622	+.mxchat-role-restriction-container {
	5623	+ margin-bottom: 8px;
	5624	+}
	5625	+
	5626	+.mxchat-role-select {
	5627	+ width: 100%;
	5628	+ max-width: 180px;
	5629	+ padding: 4px 8px;
	5630	+ border: 1px solid #ddd;
	5631	+ border-radius: 4px;
	5632	+ font-size: 12px;
	5633	+ background: white;
	5634	+}
	5635	+
	5636	+.mxchat-role-select.updating {
	5637	+ opacity: 0.6;
	5638	+ pointer-events: none;
	5639	+}
	5640	+
	5641	+.mxchat-role-select.updated {
	5642	+ border-color: #46b450;
	5643	+ box-shadow: 0 0 0 1px #46b450;
	5644	+}
	5645	+
	5646	+.mxchat-action-buttons {
	5647	+ display: flex;
	5648	+ gap: 4px;
	5649	+ justify-content: center;
	5650	+}
	5651	+
	5652	+.mxchat-actions-cell {
	5653	+ min-width: 200px;
	5654	+ text-align: center;
	5655	+}
	5656	+
	5657	+
	5658	+
	5659	+.mxchat-bot-selector {
	5660	+ display: flex;
	5661	+ flex-direction: column;
	5662	+ gap: 8px;
	5663	+ max-height: 200px;
	5664	+ overflow-y: auto;
	5665	+ border: 1px solid #ddd;
	5666	+ padding: 12px;
	5667	+ border-radius: 4px;
	5668	+ background: #f9f9f9;
	5669	+}
	5670	+
	5671	+.mxchat-bot-option {
	5672	+ display: flex;
	5673	+ align-items: center;
	5674	+}
	5675	+
	5676	+.mxchat-checkbox-label {
	5677	+ display: flex;
	5678	+ align-items: center;
	5679	+ cursor: pointer;
	5680	+ font-size: 14px;
	5681	+ gap: 8px;
	5682	+}
	5683	+
	5684	+.mxchat-checkbox-label input[type="checkbox"] {
	5685	+ margin: 0;
	5686	+}
	5687	+
	5688	+.mxchat-checkmark {
	5689	+ display: inline-block;
	5690	+}
	5691	+
	5692	+
	5693	+.mxchat-card-bots {
	5694	+ margin-top: 12px;
	5695	+ padding-top: 12px;
	5696	+ border-top: 1px solid #e5e7eb;
	5697	+}
	5698	+
	5699	+.mxchat-card-bots strong {
	5700	+ display: block;
	5701	+ margin-bottom: 6px;
	5702	+ color: #374151;
	5703	+ font-size: 13px;
	5704	+ font-weight: 600;
	5705	+}
	5706	+
	5707	+.mxchat-bot-badges {
	5708	+ display: flex;
	5709	+ flex-wrap: wrap;
	5710	+ gap: 6px;
	5711	+}
	5712	+
	5713	+.mxchat-bot-badge {
	5714	+ display: inline-flex;
	5715	+ align-items: center;
	5716	+ padding: 3px 8px;
	5717	+ background-color: #f3f4f6;
	5718	+ border: 1px solid #d1d5db;
	5719	+ border-radius: 12px;
	5720	+ font-size: 11px;
	5721	+ font-weight: 500;
	5722	+ color: #6b7280;
	5723	+ line-height: 1.2;
	5724	+ white-space: nowrap;
	5725	+}
	5726	+
	5727	+.mxchat-bot-badge:first-child {
	5728	+ background-color: #dbeafe;
	5729	+ border-color: #93c5fd;
	5730	+ color: #1e40af;
	5731	+}
	5732	+
	5733	+
	5734	+/* Always show OpenRouter API key field */
	5735	+tr.mxchat-setting-row[data-provider="openrouter"],
	5736	+.mxchat-openrouter-wrapper {
	5737	+ display: table-row !important;
	5738	+}
	5739	+
	5740	+/* ========== RAG Context Modal Styles ========== */
	5741	+
	5742	+/* Message header with role and sources link */
	5743	+.mxchat-message .mxchat-message-header {
	5744	+ display: flex;
	5745	+ justify-content: space-between;
	5746	+ align-items: center;
	5747	+ margin-bottom: 6px;
	5748	+}
	5749	+
	5750	+.mxchat-message .mxchat-role-label {
	5751	+ font-weight: 600;
	5752	+ font-size: 12px;
	5753	+ text-transform: uppercase;
	5754	+ letter-spacing: 0.02em;
	5755	+}
	5756	+
	5757	+/* Sources link - clean, professional style */
	5758	+.mxchat-rag-link {
	5759	+ font-size: 11px;
	5760	+ color: #64748b;
	5761	+ cursor: pointer;
	5762	+ transition: color 0.15s ease;
	5763	+ font-weight: 500;
	5764	+ letter-spacing: 0.01em;
	5765	+}
	5766	+
	5767	+.mxchat-rag-link:hover {
	5768	+ color: #3b82f6;
	5769	+}
	5770	+
	5771	+/* Transcript message content styling */
	5772	+.mxchat-message-content a {
	5773	+ color: #3b82f6;
	5774	+ text-decoration: none;
	5775	+}
	5776	+
	5777	+.mxchat-message-content a:hover {
	5778	+ text-decoration: underline;
	5779	+}
	5780	+
	5781	+.mxchat-message-content code {
	5782	+ background: rgba(0, 0, 0, 0.06);
	5783	+ padding: 2px 5px;
	5784	+ border-radius: 3px;
	5785	+ font-family: ui-monospace, monospace;
	5786	+ font-size: 0.9em;
	5787	+}
	5788	+
	5789	+.mxchat-message-content pre {
	5790	+ background: #1e293b;
	5791	+ color: #e2e8f0;
	5792	+ padding: 12px 16px;
	5793	+ border-radius: 6px;
	5794	+ overflow-x: auto;
	5795	+ margin: 8px 0;
	5796	+}
	5797	+
	5798	+.mxchat-message-content pre code {
	5799	+ background: none;
	5800	+ padding: 0;
	5801	+ color: inherit;
	5802	+}
	5803	+
	5804	+.mxchat-message-content strong {
	5805	+ font-weight: 600;
	5806	+}
	5807	+
	5808	+.mxchat-message-content h1,
	5809	+.mxchat-message-content h2,
	5810	+.mxchat-message-content h3,
	5811	+.mxchat-message-content h4,
	5812	+.mxchat-message-content h5,
	5813	+.mxchat-message-content h6 {
	5814	+ margin: 12px 0 8px 0;
	5815	+ font-weight: 600;
	5816	+ line-height: 1.3;
	5817	+}
	5818	+
	5819	+.mxchat-message-content h1 { font-size: 1.4em; }
	5820	+.mxchat-message-content h2 { font-size: 1.3em; }
	5821	+.mxchat-message-content h3 { font-size: 1.2em; }
	5822	+.mxchat-message-content h4 { font-size: 1.1em; }
	5823	+.mxchat-message-content h5 { font-size: 1em; }
	5824	+.mxchat-message-content h6 { font-size: 0.95em; }
	5825	+
	5826	+/* RAG Modal Overlay */
	5827	+.mxchat-rag-modal-overlay {
	5828	+ position: fixed;
	5829	+ top: 0;
	5830	+ left: 0;
	5831	+ width: 100%;
	5832	+ height: 100%;
	5833	+ background-color: rgba(15, 23, 42, 0.4);
	5834	+ backdrop-filter: blur(4px);
	5835	+ -webkit-backdrop-filter: blur(4px);
	5836	+ z-index: 100000;
	5837	+ display: flex;
	5838	+ align-items: center;
	5839	+ justify-content: center;
	5840	+ padding: 24px;
	5841	+}
	5842	+
	5843	+/* RAG Modal Content */
	5844	+.mxchat-rag-modal-content {
	5845	+ background: #fff;
	5846	+ border-radius: 16px;
	5847	+ width: 100%;
	5848	+ max-width: 640px;
	5849	+ max-height: calc(100vh - 48px);
	5850	+ display: flex;
	5851	+ flex-direction: column;
	5852	+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	5853	+ animation: mxchat-modal-appear 0.2s ease-out;
	5854	+ overflow: hidden;
	5855	+}
	5856	+
	5857	+@keyframes mxchat-modal-appear {
	5858	+ from {
	5859	+ opacity: 0;
	5860	+ transform: scale(0.96) translateY(8px);
	5861	+ }
	5862	+ to {
	5863	+ opacity: 1;
	5864	+ transform: scale(1) translateY(0);
	5865	+ }
	5866	+}
	5867	+
	5868	+/* RAG Modal Header */
	5869	+.mxchat-rag-modal-header {
	5870	+ display: flex;
	5871	+ justify-content: space-between;
	5872	+ align-items: center;
	5873	+ padding: 20px 24px;
	5874	+ border-bottom: 1px solid #e2e8f0;
	5875	+ background: #fff;
	5876	+ flex-shrink: 0;
	5877	+}
	5878	+
	5879	+.mxchat-rag-modal-header h2 {
	5880	+ margin: 0;
	5881	+ font-size: 1.125rem;
	5882	+ font-weight: 600;
	5883	+ color: #0f172a;
	5884	+ letter-spacing: -0.01em;
	5885	+}
	5886	+
	5887	+.mxchat-rag-modal-close {
	5888	+ display: flex;
	5889	+ align-items: center;
	5890	+ justify-content: center;
	5891	+ width: 32px;
	5892	+ height: 32px;
	5893	+ background: transparent;
	5894	+ border: none;
	5895	+ color: #64748b;
	5896	+ font-size: 20px;
	5897	+ cursor: pointer;
	5898	+ border-radius: 8px;
	5899	+ transition: all 0.15s ease;
	5900	+ line-height: 1;
	5901	+}
	5902	+
	5903	+.mxchat-rag-modal-close:hover {
	5904	+ background: #f1f5f9;
	5905	+ color: #0f172a;
	5906	+}
	5907	+
	5908	+/* RAG Modal Body */
	5909	+.mxchat-rag-modal-body {
	5910	+ padding: 24px;
	5911	+ overflow-y: auto;
	5912	+ flex: 1;
	5913	+}
	5914	+
	5915	+/* Loading State */
	5916	+.mxchat-rag-loading {
	5917	+ display: flex;
	5918	+ align-items: center;
	5919	+ justify-content: center;
	5920	+ gap: 12px;
	5921	+ padding: 48px 24px;
	5922	+ color: #64748b;
	5923	+ font-size: 0.875rem;
	5924	+}
	5925	+
	5926	+.mxchat-rag-loading .spinner {
	5927	+ float: none;
	5928	+ margin: 0;
	5929	+}
	5930	+
	5931	+/* Error State */
	5932	+.mxchat-rag-error {
	5933	+ text-align: center;
	5934	+ padding: 48px 24px;
	5935	+ color: #dc2626;
	5936	+ font-size: 0.875rem;
	5937	+}
	5938	+
	5939	+/* Summary Section */
	5940	+.mxchat-rag-summary {
	5941	+ display: flex;
	5942	+ gap: 32px;
	5943	+ padding: 0;
	5944	+ margin-bottom: 28px;
	5945	+ background: transparent;
	5946	+ border: none;
	5947	+}
	5948	+
	5949	+.mxchat-rag-summary-item {
	5950	+ display: flex;
	5951	+ flex-direction: column;
	5952	+ gap: 4px;
	5953	+}
	5954	+
	5955	+.mxchat-rag-label {
	5956	+ color: #94a3b8;
	5957	+ font-size: 0.6875rem;
	5958	+ font-weight: 500;
	5959	+ text-transform: uppercase;
	5960	+ letter-spacing: 0.05em;
	5961	+}
	5962	+
	5963	+.mxchat-rag-value {
	5964	+ font-weight: 600;
	5965	+ font-size: 0.9375rem;
	5966	+ color: #0f172a;
	5967	+}
	5968	+
	5969	+/* Matches Section */
	5970	+.mxchat-rag-matches h3 {
	5971	+ margin: 0 0 12px 0;
	5972	+ font-size: 0.6875rem;
	5973	+ color: #94a3b8;
	5974	+ font-weight: 600;
	5975	+ text-transform: uppercase;
	5976	+ letter-spacing: 0.05em;
	5977	+}
	5978	+
	5979	+/* Match Card */
	5980	+.mxchat-rag-match-card {
	5981	+ border: 1px solid #e2e8f0;
	5982	+ border-radius: 12px;
	5983	+ padding: 16px;
	5984	+ margin-bottom: 8px;
	5985	+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
	5986	+ background: #fff;
	5987	+}
	5988	+
	5989	+.mxchat-rag-match-card:hover {
	5990	+ border-color: #cbd5e1;
	5991	+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	5992	+}
	5993	+
	5994	+.mxchat-rag-match-card:last-child {
	5995	+ margin-bottom: 0;
	5996	+}
	5997	+
	5998	+/* Match card variants */
	5999	+.mxchat-rag-match-used {
	6000	+ border-color: #86efac;
	6001	+ background: #fafff9;
	6002	+}
	6003	+
	6004	+.mxchat-rag-match-used:hover {
	6005	+ border-color: #4ade80;
	6006	+}
	6007	+
	6008	+.mxchat-rag-match-above {
	6009	+ border-color: #fde047;
	6010	+ background: #fffef5;
	6011	+}
	6012	+
	6013	+.mxchat-rag-match-above:hover {
	6014	+ border-color: #facc15;
	6015	+}
	6016	+
	6017	+.mxchat-rag-match-below {
	6018	+ opacity: 0.5;
	6019	+}
	6020	+
	6021	+/* Match Header */
	6022	+.mxchat-rag-match-header {
	6023	+ display: flex;
	6024	+ align-items: center;
	6025	+ gap: 12px;
	6026	+ margin-bottom: 10px;
	6027	+}
	6028	+
	6029	+.mxchat-rag-match-rank {
	6030	+ background: #0f172a;
	6031	+ color: #fff;
	6032	+ font-size: 0.625rem;
	6033	+ font-weight: 600;
	6034	+ padding: 3px 6px;
	6035	+ border-radius: 4px;
	6036	+ letter-spacing: 0.02em;
	6037	+}
	6038	+
	6039	+.mxchat-rag-match-score {
	6040	+ font-size: 1rem;
	6041	+ font-weight: 700;
	6042	+ color: #0f172a;
	6043	+ font-variant-numeric: tabular-nums;
	6044	+}
	6045	+
	6046	+.mxchat-rag-match-status {
	6047	+ font-size: 0.625rem;
	6048	+ padding: 4px 8px;
	6049	+ border-radius: 6px;
	6050	+ font-weight: 600;
	6051	+ text-transform: uppercase;
	6052	+ letter-spacing: 0.03em;
	6053	+ margin-left: auto;
	6054	+}
	6055	+
	6056	+.mxchat-rag-match-status.status-used {
	6057	+ background: #dcfce7;
	6058	+ color: #166534;
	6059	+}
	6060	+
	6061	+.mxchat-rag-match-status.status-above {
	6062	+ background: #fef9c3;
	6063	+ color: #854d0e;
	6064	+}
	6065	+
	6066	+.mxchat-rag-match-status.status-below {
	6067	+ background: #f1f5f9;
	6068	+ color: #64748b;
	6069	+}
	6070	+
	6071	+/* Match Source */
	6072	+.mxchat-rag-match-source {
	6073	+ margin-bottom: 8px;
	6074	+ font-size: 0.8125rem;
	6075	+ color: #475569;
	6076	+ word-break: break-word;
	6077	+}
	6078	+
	6079	+.mxchat-rag-match-source a {
	6080	+ color: #2563eb;
	6081	+ text-decoration: none;
	6082	+}
	6083	+
	6084	+.mxchat-rag-match-source a:hover {
	6085	+ text-decoration: underline;
	6086	+}
	6087	+
	6088	+/* Match Preview */
	6089	+.mxchat-rag-match-preview {
	6090	+ font-size: 0.8125rem;
	6091	+ color: #64748b;
	6092	+ background: #f8fafc;
	6093	+ padding: 12px 14px;
	6094	+ border-radius: 8px;
	6095	+ line-height: 1.6;
	6096	+ max-height: 72px;
	6097	+ overflow: hidden;
	6098	+}
	6099	+
	6100	+/* Match Meta */
	6101	+.mxchat-rag-match-meta {
	6102	+ margin-top: 10px;
	6103	+}
	6104	+
	6105	+.mxchat-rag-role-badge {
	6106	+ display: inline-block;
	6107	+ font-size: 0.625rem;
	6108	+ padding: 3px 8px;
	6109	+ background: #f1f5f9;
	6110	+ color: #475569;
	6111	+ border-radius: 4px;
	6112	+ font-weight: 500;
	6113	+}
	6114	+
	6115	+/* Matches Summary */
	6116	+.mxchat-rag-matches-summary {
	6117	+ margin: 0 0 16px 0;
	6118	+ font-size: 0.875rem;
	6119	+ color: #334155;
	6120	+ font-weight: 500;
	6121	+}
	6122	+
	6123	+/* Chunk Badge */
	6124	+.mxchat-rag-chunk-badge {
	6125	+ display: inline-block;
	6126	+ padding: 3px 8px;
	6127	+ font-size: 0.6875rem;
	6128	+ font-weight: 600;
	6129	+ background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
	6130	+ color: #fff;
	6131	+ border-radius: 10px;
	6132	+ text-transform: uppercase;
	6133	+ letter-spacing: 0.02em;
	6134	+}
	6135	+
	6136	+/* Chunk Toggle */
	6137	+.mxchat-rag-chunk-toggle {
	6138	+ display: block;
	6139	+ padding: 10px 0;
	6140	+ font-size: 0.75rem;
	6141	+ font-weight: 600;
	6142	+ color: #6366f1;
	6143	+ cursor: pointer;
	6144	+ border-top: 1px solid #e2e8f0;
	6145	+ margin-top: 12px;
	6146	+ transition: color 0.15s ease;
	6147	+}
	6148	+
	6149	+.mxchat-rag-chunk-toggle:hover {
	6150	+ color: #4f46e5;
	6151	+}
	6152	+
	6153	+/* Chunk Details */
	6154	+.mxchat-rag-chunk-details {
	6155	+ display: none;
	6156	+ padding: 8px 0 0 0;
	6157	+}
	6158	+
	6159	+/* Chunk Row */
	6160	+.mxchat-rag-chunk-row {
	6161	+ display: flex;
	6162	+ align-items: center;
	6163	+ padding: 8px 10px;
	6164	+ margin: 4px 0;
	6165	+ border-radius: 6px;
	6166	+ font-size: 0.8125rem;
	6167	+ gap: 10px;
	6168	+}
	6169	+
	6170	+.mxchat-rag-chunk-row.chunk-used {
	6171	+ background: rgba(16, 185, 129, 0.1);
	6172	+}
	6173	+
	6174	+.mxchat-rag-chunk-row.chunk-not-used {
	6175	+ background: rgba(100, 116, 139, 0.08);
	6176	+}
	6177	+
	6178	+.mxchat-rag-chunk-icon {
	6179	+ font-size: 0.875rem;
	6180	+ width: 18px;
	6181	+ text-align: center;
	6182	+}
	6183	+
	6184	+.chunk-used .mxchat-rag-chunk-icon {
	6185	+ color: #10b981;
	6186	+}
	6187	+
	6188	+.chunk-not-used .mxchat-rag-chunk-icon {
	6189	+ color: #94a3b8;
	6190	+}
	6191	+
	6192	+.mxchat-rag-chunk-num {
	6193	+ font-weight: 600;
	6194	+ color: #334155;
	6195	+ flex: 1;
	6196	+}
	6197	+
	6198	+.mxchat-rag-chunk-score {
	6199	+ font-weight: 600;
	6200	+ color: #64748b;
	6201	+ font-variant-numeric: tabular-nums;
	6202	+}
	6203	+
	6204	+/* No Matches */
	6205	+.mxchat-rag-no-matches {
	6206	+ text-align: center;
	6207	+ padding: 48px 24px;
	6208	+ color: #64748b;
	6209	+ font-size: 0.875rem;
	6210	+}
	6211	+
	6212	+/* Approved URLs Section */
	6213	+.mxchat-rag-urls {
	6214	+ margin-top: 28px;
	6215	+ padding-top: 20px;
	6216	+ border-top: 1px solid #e2e8f0;
	6217	+}
	6218	+
	6219	+.mxchat-rag-urls h3 {
	6220	+ margin: 0 0 12px 0;
	6221	+ font-size: 0.6875rem;
	6222	+ color: #94a3b8;
	6223	+ font-weight: 600;
	6224	+ text-transform: uppercase;
	6225	+ letter-spacing: 0.05em;
	6226	+}
	6227	+
	6228	+.mxchat-rag-url-list {
	6229	+ margin: 0;
	6230	+ padding: 0;
	6231	+ list-style: none;
	6232	+}
	6233	+
	6234	+.mxchat-rag-url-list li {
	6235	+ padding: 10px 14px;
	6236	+ background: #f8fafc;
	6237	+ border-radius: 8px;
	6238	+ margin-bottom: 6px;
	6239	+ font-size: 0.8125rem;
	6240	+ word-break: break-all;
	6241	+}
	6242	+
	6243	+.mxchat-rag-url-list li:last-child {
	6244	+ margin-bottom: 0;
	6245	+}
	6246	+
	6247	+.mxchat-rag-url-list a {
	6248	+ color: #2563eb;
	6249	+ text-decoration: none;
	6250	+}
	6251	+
	6252	+.mxchat-rag-url-list a:hover {
	6253	+ text-decoration: underline;
	6254	+}
	6255	+
	6256	+/* Responsive adjustments */
	6257	+@media (max-width: 640px) {
	6258	+ .mxchat-rag-modal-overlay {
	6259	+ padding: 16px;
	6260	+ }
	6261	+
	6262	+ .mxchat-rag-modal-content {
	6263	+ max-height: calc(100vh - 32px);
	6264	+ border-radius: 12px;
	6265	+ }
	6266	+
	6267	+ .mxchat-rag-modal-header {
	6268	+ padding: 16px 20px;
	6269	+ }
	6270	+
	6271	+ .mxchat-rag-modal-body {
	6272	+ padding: 20px;
	6273	+ }
	6274	+
	6275	+ .mxchat-rag-summary {
	6276	+ flex-wrap: wrap;
	6277	+ gap: 16px;
	6278	+ }
	6279	+
	6280	+ .mxchat-rag-match-header {
	6281	+ flex-wrap: wrap;
	6282	+ }
	6283	+
	6284	+ .mxchat-rag-match-status {
	6285	+ margin-left: 0;
	6286	+ margin-top: 8px;
	6287	+ }
	6288	+}
	6289	+
	6290	+/* ========================================
	6291	+ POST TYPE VISIBILITY SETTINGS
	6292	+ ======================================== */
	6293	+.mxchat-sub-options {
	6294	+ margin-top: 20px;
	6295	+ padding: 20px;
	6296	+ background: #f8f9fa;
	6297	+ border: 1px solid #e2e4e7;
	6298	+ border-radius: 8px;
	6299	+ transition: all 0.3s ease;
	6300	+}
	6301	+
	6302	+.mxchat-post-type-visibility-header {
	6303	+ margin-bottom: 16px;
	6304	+}
	6305	+
	6306	+.mxchat-post-type-visibility-header h4 {
	6307	+ margin: 0 0 6px 0;
	6308	+ font-size: 14px;
	6309	+ font-weight: 600;
	6310	+ color: #1e1e1e;
	6311	+}
	6312	+
	6313	+.mxchat-post-type-visibility-header .description {
	6314	+ margin: 0;
	6315	+ color: #757575;
	6316	+}
	6317	+
	6318	+.mxchat-visibility-mode {
	6319	+ display: flex;
	6320	+ flex-direction: column;
	6321	+ gap: 10px;
	6322	+ margin-bottom: 16px;
	6323	+}
	6324	+
	6325	+.mxchat-radio-label {
	6326	+ display: flex;
	6327	+ align-items: center;
	6328	+ gap: 10px;
	6329	+ cursor: pointer;
	6330	+ padding: 10px 14px;
	6331	+ background: #fff;
	6332	+ border: 1px solid #dcdcde;
	6333	+ border-radius: 6px;
	6334	+ transition: all 0.2s ease;
	6335	+ font-size: 14px;
	6336	+}
	6337	+
	6338	+.mxchat-radio-label:hover {
	6339	+ border-color: #2271b1;
	6340	+ background: #f6f7f7;
	6341	+}
	6342	+
	6343	+.mxchat-radio-label input[type="radio"] {
	6344	+ margin: 0;
	6345	+ width: 16px;
	6346	+ height: 16px;
	6347	+ accent-color: #2271b1;
	6348	+}
	6349	+
	6350	+.mxchat-radio-label input[type="radio"]:checked + span {
	6351	+ font-weight: 500;
	6352	+ color: #1e1e1e;
	6353	+}
	6354	+
	6355	+.mxchat-radio-label span {
	6356	+ color: #50575e;
	6357	+}
	6358	+
	6359	+.mxchat-post-type-list {
	6360	+ display: grid;
	6361	+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	6362	+ gap: 10px;
	6363	+ padding: 16px;
	6364	+ background: #fff;
	6365	+ border: 1px solid #dcdcde;
	6366	+ border-radius: 6px;
	6367	+ max-height: 200px;
	6368	+ overflow-y: auto;
	6369	+}
	6370	+
	6371	+.mxchat-post-type-list .mxchat-checkbox-label {
	6372	+ display: flex;
	6373	+ align-items: center;
	6374	+ gap: 10px;
	6375	+ padding: 8px 12px;
	6376	+ background: #f8f9fa;
	6377	+ border: 1px solid #e2e4e7;
	6378	+ border-radius: 4px;
	6379	+ cursor: pointer;
	6380	+ transition: all 0.2s ease;
	6381	+ font-size: 13px;
	6382	+}
	6383	+
	6384	+.mxchat-post-type-list .mxchat-checkbox-label:hover {
	6385	+ border-color: #2271b1;
	6386	+ background: #f0f6fc;
	6387	+}
	6388	+
	6389	+.mxchat-post-type-list .mxchat-checkbox-label input[type="checkbox"] {
	6390	+ margin: 0;
	6391	+ width: 16px;
	6392	+ height: 16px;
	6393	+ accent-color: #2271b1;
	6394	+}
	6395	+
	6396	+.mxchat-post-type-list .mxchat-checkbox-label input[type="checkbox"]:checked + span {
	6397	+ font-weight: 500;
	6398	+ color: #1e1e1e;
	6399	+}
	6400	+
	6401	+.mxchat-post-type-list .mxchat-checkbox-label span {
	6402	+ color: #50575e;
	6403	+}
	6404	+
	6405	+/* Custom scrollbar for post type list */
	6406	+.mxchat-post-type-list::-webkit-scrollbar {
	6407	+ width: 6px;
	6408	+}
	6409	+
	6410	+.mxchat-post-type-list::-webkit-scrollbar-track {
	6411	+ background: #f1f1f1;
	6412	+ border-radius: 3px;
	6413	+}
	6414	+
	6415	+.mxchat-post-type-list::-webkit-scrollbar-thumb {
	6416	+ background: #c1c1c1;
	6417	+ border-radius: 3px;
	6418	+}
	6419	+
	6420	+.mxchat-post-type-list::-webkit-scrollbar-thumb:hover {
	6421	+ background: #a1a1a1;
	6422	+}
	6423	+
	6424	+/* Responsive adjustments */
	6425	+@media (max-width: 782px) {
	6426	+ .mxchat-sub-options {
	6427	+ padding: 16px;
	6428	+ }
	6429	+
	6430	+ .mxchat-post-type-list {
	6431	+ grid-template-columns: 1fr;
2808	6432	}
2809	6433	}