fix chat scroll and button

web/app/appointments/page.js

@@ -941,6 +941,8 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
               </div>
             )}
 
+            </>)}
+
             <button
               type="submit"
               className="appt-submit-btn"
@@ -952,8 +954,6 @@ const canBookAppointments = user?.role === "CUSTOMER" || user?.role === "ADMIN";
             {success && <div className="appt-success">{success}</div>}
 
             </>)}
-
-            </>)}
           </form>
         ) : null}
 

web/app/chat/page.js

@@ -22,6 +22,7 @@ function ChatPage() {
   const [error, setError] = useState(null);
 
   const messagesEndRef = useRef(null);
+  const messagesAreaRef = useRef(null);
   const inputRef = useRef(null);
   const pollRef = useRef(null);
   const lastMessageIdRef = useRef(null);
@@ -33,7 +34,12 @@ function ChatPage() {
   }, [authLoading, user, router, conversationIdParam]);
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    const area = messagesAreaRef.current;
+    if (!area) return;
+    const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
+    if (nearBottom) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
   }, [messages]);
 
   const fetchMessages = useCallback(async (convId) => {
@@ -330,7 +336,7 @@ function ChatPage() {
               </div>
             )}
 
-            <div style={s.messagesArea}>
+            <div style={s.messagesArea} ref={messagesAreaRef}>
               {messages.length === 0 && (
                 <div style={s.emptyState}>
                   <p style={s.emptyText}>