- Wrap client in @vueuse/core to abstract mobile client dimensions

eveai_chat_client/static/assets/css/chat.css

@@ -9,6 +9,13 @@
     --message-bot-bg: #f8f9fa;
     --border-radius: 8px;
     --spacing: 16px;
+
+    /* Nieuwe, veilige viewport-variabelen voor mobiele lay-out
+       - --vvh blijft als fallback uit viewport.js
+       - --safe-vh wordt gezet door useChatViewport()
+       - --safe-bottom-inset wordt gebruikt voor ondermarge bij de chat input */
+    --safe-vh: var(--vvh, 1vh);
+    --safe-bottom-inset: 0px;
 }
 
 /* App container layout */
@@ -16,7 +23,7 @@
     display: flex;
     /* Use visual viewport variable when available */
     min-height: 0;
-    height: calc(var(--vvh, 1vh) * 100);
+    height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
     width: 100%;
 }
 
@@ -97,7 +104,8 @@
 }
 
 html, body {
-    height: calc(var(--vvh, 1vh) * 100); min-height: 0;
+    height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
+    min-height: 0;
 }
 
 /* Base reset & overflow control */