fix: replace flex shorthand with single value and refactor mobile keyboard inset logic in messages layout

devplacepy/static/css/messages.css

@@ -1,7 +1,7 @@
 /* retoor <retoor@molodetz.nl> */
 
 .page-messages {
-    flex: 1 1 auto;
+    flex: 1;
     min-height: 0;
     display: flex;
     width: 100%;
@@ -12,7 +12,7 @@
     display: grid;
     grid-template-columns: minmax(0, 320px) 1fr;
     gap: 0;
-    flex: 1 1 auto;
+    flex: 1;
     min-height: 0;
     background: var(--bg-card);
     border: 1px solid var(--border);
@@ -68,7 +68,7 @@
 }
 
 .messages-conversations {
-    flex: 1 1 auto;
+    flex: 1;
     min-height: 0;
     overflow-y: auto;
     scrollbar-width: none;
@@ -125,7 +125,6 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
-    height: 100%;
 }
 
 .messages-main-header {
@@ -293,12 +292,10 @@
 
 .messages-input-area {
     padding: 0.75rem 1rem;
-    padding-bottom: calc(0.75rem + var(--kb-inset) + env(safe-area-inset-bottom));
-    padding-left: calc(1rem + env(safe-area-inset-left));
-    padding-right: calc(1rem + env(safe-area-inset-right));
+    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
     border-top: 1px solid var(--border);
     display: flex;
-    align-items: center;
+    align-items: flex-end;
     gap: 0.5rem;
     flex-shrink: 0;
     min-height: 56px;
@@ -308,6 +305,7 @@
 .messages-input-area input[type="text"] {
     flex: 1;
     min-width: 0;
+    margin: 0;
 }
 
 .messages-input-area dp-upload {
@@ -405,59 +403,86 @@
     color: var(--accent);
 }
 
+/* ── Mobile (≤ 768px) ───────────────────────────────────── */
+/* Switches layout from grid to flex column so a single visible
+   child (conversation list OR chat pane) always fills the viewport.
+   The --kb-inset is applied here so the keyboard never obscures
+   the input bar.                                        */
+
 @media (max-width: 768px) {
+    .page-messages {
+        padding-bottom: max(env(safe-area-inset-bottom), var(--kb-inset, 0px));
+    }
+
     .messages-layout {
-        grid-template-columns: 1fr;
+        display: flex;
+        flex-direction: column;
         min-height: 0;
-        height: 100%;
+        flex: 1;
         border-radius: 0;
         border-left: none;
         border-right: none;
     }
+
     .messages-list {
-        display: flex;
+        flex: 1;
         min-height: 0;
-        height: 100%;
     }
+
     .messages-list.hide {
         display: none;
     }
+
     .messages-main {
+        flex: 1;
         min-height: 0;
-        height: 100%;
     }
+
     .messages-main.hide {
         display: none;
     }
+
     .messages-back-btn {
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
+
     .messages-input-area input[type="text"] {
         font-size: 16px;
     }
 }
 
+/* ── Small mobile (≤ 360px) ─────────────────────────────── */
+
 @media (max-width: 360px) {
     .messages-thread {
-        padding: 0.75rem;
+        padding: 0.5rem;
     }
 
     .messages-input-area {
-        padding: 0.5rem 0.75rem;
-        padding-bottom: calc(0.5rem + var(--kb-inset) + env(safe-area-inset-bottom));
-        padding-left: calc(0.75rem + env(safe-area-inset-left));
-        padding-right: calc(0.75rem + env(safe-area-inset-right));
+        padding: 0.375rem 0.5rem;
+        padding-bottom: calc(0.375rem + env(safe-area-inset-bottom));
+        min-height: 48px;
+    }
+
+    .messages-input-area input[type="text"] {
+        font-size: 16px;
     }
 
     .message-bubble {
-        max-width: 85%;
-        padding: 0.5rem 0.75rem;
+        max-width: 90%;
+        padding: 0.5rem 0.625rem;
         font-size: 0.8125rem;
     }
+
+    .messages-main-header {
+        padding: 0.625rem 0.75rem;
+    }
 }
 
+/* ── Touch devices: larger send target ──────────────────── */
+
 @media (hover: none) and (pointer: coarse) {
     .messages-send-btn {
         width: 44px;