- Adaptation of the form message layout, in such a way that labels are shown on top of their values iso left, allowing a decent rendering on mobile devices

- refactoring message-content CSS

eveai_chat_client/static/assets/css/chat-components.css

@@ -155,18 +155,7 @@
 }
 
 /* Zorg dat de progress tracker goed wordt weergegeven in een lege message bubble */
-.message-content:has(.message-text:empty) .message-progress {
-    margin-bottom: 0;
-}
-
-/* Verberg de message content container als er geen inhoud is en de verwerking bezig is */
-.message-content:has(.message-text:empty):not(:has(.message-progress.completed)):not(:has(.message-progress.error)) {
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    padding: 0;
-    margin: 0;
-}
+/* moved to ChatMessage.vue scoped styles */
 
 /* Focus binnen ChatInput voor toegankelijkheid */
 .chat-input:focus-within {
@@ -208,33 +197,7 @@
     justify-content: flex-start;
 }
 
-/* Message content wrapper - dit wordt de bubble */
-.message-content {
-    max-width: 70%;
-    padding: 12px 16px;
-    border-radius: 18px;
-    word-wrap: break-word;
-    position: relative;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    transition: all 0.2s ease;
-    display: inline-block;
-}
-
-/* User message bubble styling */
-.message.user .message-content {
-    background: var(--human-message-background);
-    color: var(--human-message-text-color);
-    border-bottom-right-radius: 4px;
-}
-
-/* AI/Bot message bubble styling */
-.message.ai .message-content,
-.message.bot .message-content {
-    background: var(--ai-message-background);
-    color: var(--ai-message-text-color);
-    border-bottom-left-radius: 4px;
-    margin-right: 60px;
-}
+/* moved to ChatMessage.vue scoped styles */
 
 /* Message text content */
 .message-text {
@@ -435,10 +398,7 @@
 }
 
 /* Hover effects voor message bubbles */
-.message-content:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
+/* moved to ChatMessage.vue scoped styles */
 
 /* Bestaande animation en date-separator blijven hetzelfde */
 @keyframes messageSlideIn {
@@ -483,11 +443,7 @@
         padding: 0 15px;
     }
 
-    .message-content {
-        max-width: 85%;
-        padding: 10px 14px;
-        font-size: 14px;
-    }
+    /* moved to ChatMessage.vue scoped styles */
 
     .message.user .message-content {
         margin-left: 40px;
@@ -504,11 +460,7 @@
         padding: 0 10px;
     }
 
-    .message-content {
-        max-width: 90%;
-        margin-left: 20px !important;
-        margin-right: 20px !important;
-    }
+    /* moved to ChatMessage.vue scoped styles */
 }
 
 /* Progress Tracker Styling */