- Layout improvements for the Chat client

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

@@ -30,7 +30,7 @@
     min-height: 0; /* Belangrijk voor nested flexbox */
     margin-bottom: 20px; /* Ruimte tussen messages en input */
     border-radius: 15px;
-    background: rgba(255,255,255,0.1);
+    background: var(--history-background);
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0,0,0,0.1);
     width: 100%;
@@ -94,7 +94,8 @@
     align-items: flex-end;
     gap: 12px;
     padding: 20px;
-    background: white;
+    background: var(--active-background-color);
+    color: var(--active-text-color);
     border-radius: 15px;
     box-shadow: 0 2px 15px rgba(0,0,0,0.1);
     border: 1px solid rgba(0,0,0,0.05);
@@ -105,32 +106,6 @@
     position: relative;
 }
 
-.message-input {
-    width: 100%;
-    min-height: 45px;
-    max-height: 120px;
-    padding: 12px 18px;
-    border: 1px solid #ddd;
-    border-radius: 25px;
-    resize: none;
-    font-family: inherit;
-    font-size: 14px;
-    line-height: 1.4;
-    outline: none;
-    transition: all 0.2s ease;
-    box-sizing: border-box;
-}
-
-.message-input:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-}
-
-.message-input.over-limit {
-    border-color: #dc3545;
-    background-color: rgba(220, 53, 69, 0.05);
-}
-
 
 .input-actions {
     display: flex;
@@ -143,8 +118,8 @@
     height: 45px;
     border: none;
     border-radius: 50%;
-    background: var(--primary-color);
-    color: white;
+    background: var(--active-background-color);
+    color: var(--active-text-color);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -155,7 +130,8 @@
 }
 
 .send-btn:hover:not(:disabled) {
-    background: var(--secondary-color);
+    background: var(--active-text-color);
+    color: var(--active-background-color);
     transform: scale(1.05);
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
 }
@@ -230,12 +206,6 @@
         font-size: 16px;
     }
 
-    .message-input {
-        font-size: 16px; /* Voorkomt zoom op iOS */
-        padding: 10px 15px;
-        min-height: 40px;
-    }
-
     .chat-component-container {
         max-width: 100%; /* Op mobiel volledige breedte gebruiken */
     }
@@ -261,9 +231,6 @@
 }
 
 /* Loading states */
-.chat-input.loading .message-input {
-    opacity: 0.7;
-}
 
 .chat-input.loading .action-btn {
     animation: pulse 1.5s infinite;
@@ -376,16 +343,16 @@
 
 /* User message bubble styling */
 .message.user .message-content {
-    background: rgba(0, 0, 0, 0.1);
-    color: white;
+    background: var(--history-user-message-background);
+    color: var(--history-message-text-color);
     border-bottom-right-radius: 4px;
 }
 
 /* AI/Bot message bubble styling */
 .message.ai .message-content,
 .message.bot .message-content {
-    background: rgba(255, 255, 255, 0.1);
-    color: #212529;
+    background: var(--history-ai-message-background);
+    color: var(--history-message-text-color);
     border-bottom-left-radius: 4px;
     margin-right: 60px;
 }