fix conflicting css rules

phd-advisor-frontend/src/components/MessageBubble.js

@@ -270,10 +270,10 @@ const MessageBubble = ({
           
           {showReplyButton && (
             <div className="message-actions">
-              <div className="action-buttons">
+              <div className="message-action-buttons">
                 <div className="tooltip-container">
                   <button 
-                    className="action-button"
+                    className="message-action-button"
                     onClick={() => onReply && onReply(message)}
                     onMouseEnter={() => showTooltipWithDelay('reply')}
                     onMouseLeave={hideTooltip}
@@ -282,7 +282,7 @@ const MessageBubble = ({
                       borderColor: (colors.color ? colors.color + '40' : 'var(--border-muted)')
                     }}
                   >
-                    <Reply size={14} />
+                    <Reply size={14} stroke="currentColor" fill="none" />
                   </button>
                   {showTooltip === 'reply' && (
                     <div className="tooltip">Reply to this message</div>
@@ -291,7 +291,7 @@ const MessageBubble = ({
 
                 <div className="tooltip-container">
                   <button 
-                    className="action-button"
+                    className="message-action-button"
                     onClick={() => handleCopy(message.id, message?.compact_markdown || message?.content || '')}
                     onMouseEnter={() => showTooltipWithDelay('copy')}
                     onMouseLeave={hideTooltip}
@@ -311,7 +311,7 @@ const MessageBubble = ({
 
                 <div className="tooltip-container">
                   <button 
-                    className="action-button"
+                    className="message-action-button"
                     onClick={() => handleExpand(message.id, personaId)}
                     onMouseEnter={() => showTooltipWithDelay('expand')}
                     onMouseLeave={hideTooltip}
@@ -329,7 +329,7 @@ const MessageBubble = ({
 
                 <div className="tooltip-container">
                   <button 
-                    className="action-button"
+                    className="message-action-button"
                     onClick={handleInfoToggle}
                     onMouseEnter={() => showTooltipWithDelay('info')}
                     onMouseLeave={hideTooltip}

phd-advisor-frontend/src/styles/components.css

@@ -591,13 +591,13 @@
   border-top: 1px solid var(--border-tertiary);
 }
 
-.action-buttons {
+.message-action-buttons {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.action-button {
+.message-action-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -611,16 +611,22 @@
   position: relative;
 }
 
-.action-button:hover {
+.message-action-button:hover {
   background: var(--bg-secondary);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.action-button:active {
+.message-action-button:active {
   transform: translateY(0);
 }
 
+.message-action-button svg {
+  width: 14px;
+  height: 14px;
+  color: inherit;
+}
+
 /* Tooltip Styles */
 .tooltip-container {
   position: relative;
@@ -686,13 +692,13 @@
 }
 
 /* Focus states for accessibility */
-.action-button:focus-visible {
+.message-action-button:focus-visible {
   outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
 }
 
 /* Copy button success state */
-.action-button.copied {
+.message-action-button.copied {
   color: #10B981 !important;
   border-color: #10B98140 !important;
 }
@@ -1031,11 +1037,11 @@
 }
 
 /* Smooth transitions */
-.action-button {
+.message-action-button {
   transition: all 0.2s ease;
 }
 
-.action-button:hover {
+.message-action-button:hover {
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -1155,11 +1161,11 @@
     grid-template-columns: 1fr;
   }
 
-    .action-buttons {
+    .message-action-buttons {
     gap: 6px;
   }
 
-  .action-button {
+  .message-action-button {
     width: 28px;
     height: 28px;
   }