- Layout improvements for the Chat client

eveai_chat_client/static/assets/vue-components/ChatInput.vue

@@ -389,7 +389,8 @@ export default {
 .chat-input-container {
     width: 100%;
     padding: 10px;
-    background-color: #fff;
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
     border-top: 1px solid #e0e0e0;
     font-family: Arial, sans-serif;
     font-size: 14px;
@@ -405,12 +406,14 @@ export default {
 .input-main {
     flex: 1;
     position: relative;
+    /* Zorg ervoor dat er ruimte is voor de verzendknop */
+    margin-right: 0;
 }
 
 .message-input {
     width: 100%;
     min-height: 40px;
-    padding: 10px 40px 10px 15px;
+    padding: 10px 60px 10px 15px; /* Meer rechter padding voor character counter */
     border: 1px solid #ddd;
     border-radius: 20px;
     resize: none;
@@ -418,27 +421,26 @@ export default {
     transition: border-color 0.2s;
     font-family: Arial, sans-serif;
     font-size: 14px;
-}
-
-.message-input:focus {
-    border-color: #0084ff;
-}
-
-.message-input.over-limit {
-    border-color: #ff4d4f;
+    /* Transparante achtergrond in plaats van wit */
+    background-color: transparent;
+    /* Box-sizing om padding correct te berekenen */
+    box-sizing: border-box;
 }
 
 /* Character counter */
 .character-counter {
     position: absolute;
-    right: 10px;
-    bottom: 10px;
+    right: 15px;
+    bottom: 12px;
     font-size: 12px;
     color: #999;
+    pointer-events: none; /* Voorkom dat deze de textarea verstoort */
 }
 
+/* Character counter wordt rood bij overschrijding */
 .character-counter.over-limit {
     color: #ff4d4f;
+    font-weight: bold;
 }
 
 /* Input actions */
@@ -446,6 +448,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 8px;
+    flex-shrink: 0; /* Voorkom dat de knop krimpt */
 }
 
 /* Verzendknop */
@@ -455,29 +458,36 @@ export default {
     justify-content: center;
     width: 40px;
     height: 40px;
-    background-color: #0084ff;
-    color: white;
-    border: none;
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
+    border: 1px solid var(--active-text-color);
     border-radius: 50%;
     cursor: pointer;
     transition: background-color 0.2s;
+    flex-shrink: 0; /* Voorkom dat de knop krimpt */
 }
 
 .send-btn:hover {
-    background-color: #0077e6;
+    background-color: var(--active-text-color);
+    color: var(--active-background-color);
 }
 
 .send-btn:disabled {
     background-color: #ccc;
+    color: #666;
+    border-color: #ccc;
     cursor: not-allowed;
 }
 
 .send-btn.form-mode {
-    background-color: #4caf50;
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
+    border-color: var(--active-text-color);
 }
 
 .send-btn.form-mode:hover {
-    background-color: #43a047;
+    background-color: var(--active-text-color);
+    color: var(--active-background-color);
 }
 
 /* Loading spinner */
@@ -490,17 +500,4 @@ export default {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }
-
-/* Formulier in chat input */
-.dynamic-form-container {
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 15px 15px 5px 15px;
-    position: relative;
-    background-color: #f9f9f9;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-    font-family: Arial, sans-serif;
-    font-size: 14px;
-}
-</style>
+</style>