Fix input alignment and mobile responsiveness

- Set message-input max-width to 70% to match message bubble width
- Add mobile media query: input 95%, message bubble 90%
- Input wrapper uses flex: 1 for proper sizing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/MessageInput.css

@@ -3,13 +3,20 @@
   gap: 12px;
   padding: 16px;
   box-sizing: border-box;
+  max-width: 70%;
 }
 
 .message-input .input-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 70%;
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .message-input {
+    max-width: 95%;
+  }
 }
 
 .message-input .char-count {

frontend/src/components/MessageList.css

@@ -44,6 +44,12 @@
   gap: 4px;
 }
 
+@media (max-width: 768px) {
+  .message-bubble {
+    max-width: 90%;
+  }
+}
+
 .message.mine .message-bubble {
   background: #e94560;
   border-bottom-right-radius: 4px;