fix: fix blank chat bubbles on mobile by adjusting input area layout and send button styling

- Reduced input area padding from 1rem to 0.75rem 1rem and switched from flex-wrap to align-items center with smaller gap
- Changed send button from rectangular with padding to a 36px circular button with centered icon and hover transition
- Added flex-shrink and min-width:0 to text input to prevent overflow on narrow screens
- Added full-width attachment preview container with negative order to stack above input row
- Injected JavaScript to auto-scroll message thread to bottom and focus input on page load for mobile UX

devplacepy/static/css/messages.css

@@ -169,25 +169,44 @@
 }
 
 .messages-input-area {
-    padding: 1rem;
+    padding: 0.75rem 1rem;
     border-top: 1px solid var(--border);
     display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.messages-input-area input {
+.messages-input-area input[type="text"] {
     flex: 1;
+    min-width: 0;
+}
+
+.messages-input-area .attachment-upload-container {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+}
+
+.messages-input-area .attachment-preview-list {
+    flex: 0 0 100%;
+    order: -1;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
 }
 
 .messages-send-btn {
-    padding: 0.5rem 1rem;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    padding: 0;
     background: var(--accent);
     color: #fff;
-    border-radius: var(--radius);
+    border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 1rem;
+    transition: background 0.15s;
 }
 
 .messages-send-btn:hover {