fix(chat): 채팅 영역 오른쪽 끝·상단 여백 정렬 보정

- 상품목록 버튼 래퍼에 pr-[16px] 추가 — 채팅 스크롤바 오른쪽 끝과 정렬
- 상단 pt-[64px] 를 스크롤 컨테이너 안쪽으로 이동 — 첫 메시지는 협상절차 카드와 높이 유지, 스크롤 시 여백 없이 맨 위까지 표시
- chat-scroll 스크롤바 트랙에 margin-top 64px — 스크롤바 시작 높이를 협상절차 카드 상단과 일치

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/features/chat/components/ChatMessage.tsx

@@ -10,8 +10,9 @@ import { RejectCM } from '@/features/chat/components/templates/RejectCM'
 
 export function ChatMessage() {
   return (
-    <div className="flex-1 w-full min-h-0 pr-[16px] pt-[64px]">
-      <div className="chat-scroll h-full overflow-y-auto flex flex-col pl-[140px] pr-[126px]">
+    <div className="flex-1 w-full min-h-0 pr-[16px]">
+      {/* pt-[64px]: 첫 메시지를 우측 협상절차 카드 상단과 맞추되, 스크롤 시 여백도 함께 밀려 올라가도록 스크롤 컨테이너 안쪽에 둔다 */}
+      <div className="chat-scroll h-full overflow-y-auto flex flex-col pt-[64px] pl-[140px] pr-[126px]">
         <ChatList />
       </div>
     </div>

frontend/src/features/chat/components/UserButton.tsx

@@ -20,7 +20,8 @@ export function UserButton({ type, text, textList, priceErrorMessage }: UserButt
   if (type === '') return null
 
   return (
-    <div className="flex w-full pb-[52px]">
+    // pr-[16px]: 채팅 스크롤 영역(ChatMessage 바깥 pr-[16px])과 오른쪽 끝 정렬
+    <div className="flex w-full pb-[52px] pr-[16px]">
       <div className="grid grid-cols-[1fr_auto_1fr] items-center w-full">
         <div />
         <div className="flex justify-center">

frontend/src/index.css

@@ -173,6 +173,10 @@
 }
 
 /* 채팅 영역 스크롤바 (배경과 구분되게 진하게) */
+/* 트랙 상단 64px 여백: 콘텐츠는 맨 위까지 스크롤되지만 스크롤바는 우측 협상절차 카드 상단과 같은 높이에서 시작 */
+.chat-scroll::-webkit-scrollbar-track {
+  margin-top: 64px;
+}
 .chat-scroll::-webkit-scrollbar-thumb {
   background-color: var(--neutral-40);
 }