← All changes | css/chat-style.css +115 -23 2.0.4 → 2.2.7 View file →

		@@ -170,8 +170,33 @@
170	170	gap: 8px !important;
171	171	margin-bottom: 8px !important;
172	172	}
173	173
	174	+.bot-message .chat-heading {
	175	+color: inherit;
	176	+}
	177	+
	178	+div.bot-message h1.chat-heading {
	179	+ font-size: 24px;
	180	+}
	181	+
	182	+div.bot-message h2.chat-heading {
	183	+ font-size: 20px;
	184	+}
	185	+
	186	+div.bot-message h3.chat-heading {
	187	+ font-size: 18px;
	188	+}
	189	+
	190	+div.bot-message h4.chat-heading {
	191	+ font-size: 16px;
	192	+}
	193	+
	194	+div.bot-message h5.chat-heading {
	195	+ font-size: 12px;
	196	+}
	197	+
	198	+
174	199	.mxchat-site-icon {
175	200	width: 16px !important;
176	201	height: 16px !important;
177	202	flex-shrink: 0 !important;
		@@ -263,15 +288,14 @@
263	288	}
264	289
265	290	.active-pdf-name {
266	291	font-size: 11px;
267		- color: #666;
268	292	white-space: nowrap;
269	293	overflow: hidden;
270	294	text-overflow: ellipsis;
271	295	}
272	296
273		-.remove-pdf-btn {
	297	+.remove-pdf-btn, .toolbar-perplexity {
274	298	background: 0 0;
275	299	border: none;
276	300	padding: 2px;
277	301	margin-left: 4px;
		@@ -279,9 +303,9 @@
279	303	transition: opacity .2s;
280	304	line-height: 13px;
281	305	}
282	306
283		-.remove-pdf-btn:hover {
	307	+.remove-pdf-btn:hover, .toolbar-perplexity:hover {
284	308	opacity: 1;
285	309	background: none;
286	310	}
287	311
		@@ -291,10 +315,10 @@
291	315	#mxchat-chatbot .chat-toolbar {
292	316	display: flex;
293	317	gap: 10px;
294	318	padding: 8px;
295		- border-top: 1px solid #e5e5e5;
296	319	background: none;
	320	+ align-items: end;
297	321	}
298	322
299	323	#mxchat-chatbot .toolbar-btn {
300	324	background: none;
		@@ -302,9 +326,8 @@
302	326	padding: 0px;
303	327	cursor: pointer;
304	328	width: 16px;
305	329	height: 16px;
306		- display: flex;
307	330	align-items: center;
308	331	justify-content: center;
309	332	opacity: 0.6;
310	333	transition: opacity 0.2s;
		@@ -331,8 +354,26 @@
331	354	background: none;
332	355	border: none;
333	356	}
334	357
	358	+/* Add this to your plugin's CSS */
	359	+.toolbar-btn.active {
	360	+ background-color: rgba(120, 115, 245, 0.2);
	361	+ box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.4);
	362	+}
	363	+
	364	+
	365	+.system-message {
	366	+ padding: 8px 12px;
	367	+ margin: 8px 0;
	368	+ background-color: rgba(120, 115, 245, 0.1);
	369	+ border-radius: 8px;
	370	+ color: #555;
	371	+ font-style: italic;
	372	+ font-size: 14px;
	373	+ text-align: center;
	374	+}
	375	+
335	376	#mxchat-chatbot .spinner {
336	377	animation: rotate 2s linear infinite;
337	378	width: 20px;
338	379	height: 20px;
		@@ -560,9 +601,11 @@
560	601
561	602	#mxchat-popular-questions {
562	603	padding: 10px;
563	604	}
564		-
	605	+.user-message p {
	606	+ margin: 0;
	607	+}
565	608	.mxchat-popular-questions-title {
566	609	font-size: 14px;
567	610	line-height: 24px;
568	611	font-weight: bold;
		@@ -575,8 +618,9 @@
575	618	display: flex;
576	619	flex-direction: column;
577	620	max-height: 200px;
578	621	overflow-y: auto;
	622	+ padding-top: 20px;
579	623	padding-right: 10px;
580	624	padding-bottom: 10px;
581	625	scrollbar-width: thin; /* For Firefox */
582	626	scrollbar-color: #212121 #f1f1f1; /* Thumb and track colors */
		@@ -628,9 +672,9 @@
628	672	color: #212121;
629	673	font-size: 14px;
630	674	line-height: 24px;
631	675	cursor: pointer;
632		- text-align: left;
	676	+ text-align: initial;
633	677	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
634	678	margin-bottom: 10px;
635	679	}
636	680
		@@ -746,14 +790,13 @@
746	790	text-align: left;
747	791	float: right;
748	792	clear: both;
749	793	border-radius: 18px 0 18px 18px;
750		- border: solid 1px #212121;
751		- word-wrap: break-word;
	794	+ word-wrap: break-word;
	795	+ border: 1px solid rgba(226, 232, 255, .2);
752	796	}
753	797
754	798	#mxchat-chatbot #chat-container #chat-box .bot-message {
755		- text-align: left;
756	799	float: left;
757	800	clear: both;
758	801	border: 1px solid rgba(226, 232, 255, .2);
759	802	border-radius: 0 18px 18px;
		@@ -797,8 +840,9 @@
797	840	border-radius: 5px;
798	841	box-sizing: border-box;
799	842	padding: 0.4em 0.5em;
800	843	outline: none;
	844	+ border-radius: 10px;
801	845	}
802	846
803	847	/* Styling the scrollbar for WebKit browsers (Chrome, Safari, etc.) */
804	848	#chat-input::-webkit-scrollbar {
		@@ -1030,52 +1074,81 @@
1030	1074	#mxchat-chatbot-wrapper .chatbot-footer .powered-by span {
1031	1075	text-decoration: underline;
1032	1076	}
1033	1077
1034		-.thinking-dots-container {
	1078	+#chat-box .bot-message.temporary-message .thinking-dots-container {
1035	1079	display: flex;
1036	1080	justify-content: center;
1037	1081	align-items: center;
1038	1082	overflow: hidden;
1039		- height: 20px; /* Adjust as needed */
	1083	+ height: 20px;
	1084	+ position: relative;
	1085	+ z-index: 1;
	1086	+ flex-shrink: 0;
1040	1087	}
1041	1088
1042		-.thinking-dots {
	1089	+#chat-box .bot-message.temporary-message .thinking-dots {
1043	1090	display: flex;
1044	1091	justify-content: center;
1045	1092	align-items: center;
1046	1093	height: 90%;
	1094	+ gap: 5px;
	1095	+ flex-shrink: 0;
1047	1096	}
1048	1097
1049		-.dot {
1050		- height: 8px;
1051		- width: 8px;
	1098	+#chat-box .bot-message.temporary-message .thinking-dots .dot {
	1099	+ height: 6px;
	1100	+ width: 6px;
1052	1101	margin: 0 3px;
1053	1102	background-color: #fff;
1054	1103	border-radius: 50%;
1055	1104	display: inline-block;
	1105	+ position: static;
	1106	+ right: auto;
	1107	+ top: auto;
	1108	+ text-align: initial;
	1109	+ color: transparent;
	1110	+ font-size: 0;
	1111	+ font-weight: normal;
	1112	+ line-height: normal;
	1113	+ font-style: normal;
1056	1114	animation: bounce 1.4s ease-in-out infinite both;
	1115	+ -webkit-animation: bounce 1.4s ease-in-out infinite both;
	1116	+ -moz-animation: bounce 1.4s ease-in-out infinite both;
	1117	+ -o-animation: bounce 1.4s ease-in-out infinite both;
	1118	+ vertical-align: middle;
1057	1119	}
1058	1120
1059		-.dot:first-child {
1060		- animation-delay: -.32s;
	1121	+#chat-box .bot-message.temporary-message .thinking-dots .dot:first-child {
	1122	+ animation-delay: -0.32s;
	1123	+ -webkit-animation-delay: -0.32s;
	1124	+ -moz-animation-delay: -0.32s;
	1125	+ -o-animation-delay: -0.32s;
1061	1126	}
1062	1127
1063		-.dot:nth-child(2) {
1064		- animation-delay: -.16s;
	1128	+#chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) {
	1129	+ animation-delay: -0.16s;
	1130	+ -webkit-animation-delay: -0.16s;
	1131	+ -moz-animation-delay: -0.16s;
	1132	+ -o-animation-delay: -0.16s;
1065	1133	}
1066	1134
1067	1135	@keyframes bounce {
1068	1136	0%, 100%, 80% {
1069	1137	transform: scale(1);
	1138	+ -webkit-transform: scale(1);
	1139	+ -moz-transform: scale(1);
	1140	+ -o-transform: scale(1);
1070	1141	}
1071	1142	40% {
1072	1143	transform: scale(1.5);
	1144	+ -webkit-transform: scale(1.5);
	1145	+ -moz-transform: scale(1.5);
	1146	+ -o-transform: scale(1.5);
1073	1147	}
1074	1148	}
1075	1149
1076	1150
1077		-
1078	1151	#pre-chat-message {
1079	1152	position: fixed;
1080	1153	bottom: 85px;
1081	1154	right: 30px;
		@@ -1109,10 +1182,9 @@
1109	1182	align-items: center;
1110	1183	justify-content: center;
1111	1184	padding: 0;
1112	1185	line-height: 1;
1113		- display: flex;
1114		- min-height: 20px;
	1186	+ display: flex; /* Show the close button on hover */
1115	1187	}
1116	1188
1117	1189
1118	1190
		@@ -1163,4 +1235,24 @@
1163	1235
1164	1236	.bot-message {
1165	1237	white-space: pre-line;
1166	1238	}
	1239	+
	1240	+
	1241	+
	1242	+/* Simplified styles for Perplexity status indicator */
	1243	+#active-perplexity-container {
	1244	+ display: flex;
	1245	+ align-items: center;
	1246	+ margin-left: 8px;
	1247	+ font-size: 12px;
	1248	+}
	1249	+
	1250	+#perplexity-search-btn {
	1251	+ display: none;
	1252	+}
	1253	+
	1254	+#perplexity-search-btn.active {
	1255	+ opacity: 1;
	1256	+}
	1257	+
	1258	+