fix(chat-bubbles/fonts): Limit font adjustments to chat bubbles only (#…

…55)

- Restricted font size, line-height, and letter-spacing adjustments to only apply to chat bubbles
- Prevented unintended styling changes to the rest of the website

Changes summary:
    - Limited font adjustments to chat bubbles, preventing styling changes to the rest of the website.

src/sass/elements/_right--main.scss

@@ -35,6 +35,14 @@ main [data-testid^='conversation-turn-'] {
 	--main-surface-tertiary: var(--c-surface-3) !important;
 	margin-bottom: var(--mb-chat-bubble) !important;
 
+	div[data-message-author-role],
+	.text-base,
+	.prose {
+		letter-spacing: calc((var(--letterSpacing) / 16) * 1px) !important;
+		line-height: calc(var(--lineHeight) / 16) !important;
+		font-size: calc((var(--fontSize) / 16) * 1rem) !important;
+	}
+
 	.mx-auto.flex.flex-1.text-base,
 	[class*='xl:max-w-[48rem]'] {
 		max-width: var(--w_chat_gpt) !important;
@@ -112,7 +120,7 @@ main [data-testid^='conversation-turn-'] {
 
 	/* @ RIGHT - CHATS BUBBLES - USER  */
 	&:has([data-message-author-role='user']) {
-		line-height: calc(var(--lineHeight) / 16) !important;
+		// line-height: calc(var(--lineHeight) / 16) !important;
 
 		/*  RIGHT - CHATS BUBBLE BG */
 		/* ? gpt4o - User message */
@@ -217,9 +225,9 @@ main [data-testid^='conversation-turn-'] {
 			}
 		}
 
-		.markdown {
-			line-height: calc(var(--lineHeight) / 16) !important;
-		}
+		// .markdown {
+		// 	line-height: calc(var(--lineHeight) / 16) !important;
+		// }
 
 		/*   RIGHT - CHATS BUBBLE BG 
 		- Adding .markdown here fix flash background of user chat bubble on first message

src/sass/global/_base.scss

@@ -11,9 +11,8 @@ html,
 body {
 	--text-primary: var(--c-txt) !important;
 
-	font-size: calc((var(--fontSize) / 16) * 1rem) !important;
-	letter-spacing: calc((var(--letterSpacing) / 16) * 1px) !important;
-	;
+	// font-size: calc((var(--fontSize) / 16) * 1rem) !important;
+	// letter-spacing: calc((var(--letterSpacing) / 16) * 1px) !important;
 	color: var(--c-txt) !important;
 	background-color: var(--c-bg-chats-container) !important;
 	// background-image: radial-gradient(circle at 80% 30%, #72509833 0, #72509800 30%), radial-gradient(circle at 60% 40%, #3e6cb026 0, #3e6cb000 20%), radial-gradient(ellipse at 35% 80%, #0088ff26 0, #08f0 45%) !important;