Style links in bold and white

src/app/chat/chat.component.scss

@@ -65,13 +65,6 @@ $logo-size: 40px;
             color: white;
             align-self: flex-start;
             border-top-left-radius: 0;
-
-            a {
-                color: white;          // Set link text to white
-                font-weight: bold;      // Make the link bold
-                text-decoration: underline; // Ensure underline
-                cursor: pointer;        // Pointer cursor on hover
-            }
         }
 
         &.user {

src/app/chat/chat.component.ts

@@ -145,7 +145,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
   formatResponseText(text: string): string {
     const withLineBreaks = text.replace(/(\d+\.\s*\*\*.*?\*\*)/g, '<br>$1');
     const boldFormatted = withLineBreaks.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
-    const linkFormatted = boldFormatted.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    const linkFormatted = boldFormatted.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="system-link">$1</a>');
     return linkFormatted;
   }
 
@@ -206,7 +206,7 @@ export class ChatComponent implements OnInit, AfterViewChecked {
         lastMessageElement.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
         setTimeout(() => {
-          this.chatBody!.nativeElement.scrollTop += 8;
+          this.chatBody!.nativeElement.scrollTop += 12;
         }, 500);
       }
     }, 0);

src/styles.scss

@@ -1,2 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
-@import "../node_modules/@ng-select/ng-select/themes/default.theme.css";
+@import "../node_modules/@ng-select/ng-select/themes/default.theme.css";
+
+.system-link {
+    color: white;
+    font-weight: bold;
+    text-decoration: underline;
+    cursor: pointer;
+}