- Refinement of the chat client to have better visible clues for user vs chatbot messages

- Introduction of interview_phase and normal phase in TRAICIE_SELECTION_SPECIALIST to make interaction with bot more human.
- More and random humanised messages to TRAICIE_SELECTION_SPECIALIST

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

@@ -1,14 +1,6 @@
 /* ChatInput component styling */
 
 /* Algemene container */
-.chat-input-container {
-    width: 100%;
-    padding: 10px;
-    background-color: #fff;
-    border-top: 1px solid #e0e0e0;
-    font-family: Arial, sans-serif;
-    font-size: 14px;
-}
 
 /* Input veld en knoppen */
 .chat-input {
@@ -42,38 +34,6 @@
     gap: 8px;
 }
 
-/* Verzendknop */
-.send-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    background-color: #0084ff;
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
-
-.send-btn:hover {
-    background-color: #0077e6;
-}
-
-.send-btn:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-}
-
-.send-btn.form-mode {
-    background-color: #4caf50;
-}
-
-.send-btn.form-mode:hover {
-    background-color: #43a047;
-}
-
 /* Loading spinner */
 .loading-spinner {
     display: inline-block;
@@ -85,3 +45,40 @@
     100% { transform: rotate(360deg); }
 }
 
+/* Form actions container */
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px 0;
+    margin-top: 10px;
+}
+
+/* Form send actions container - for send button within form */
+.form-send-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px 0;
+    margin-top: 10px;
+}
+
+/* Dynamic form container transitions */
+.dynamic-form-container {
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Chat input transitions */
+.chat-input {
+    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+    transform: translateY(0);
+    opacity: 1;
+}
+
+/* Smooth transitions for mode switching */
+.chat-input-container > * {
+    transition: opacity 0.2s ease-in-out;
+}
+