diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
index 9ee1b6c87..ae4e98468 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.css
@@ -80,13 +80,25 @@
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  /* No side padding on phones: the app shell's content box already insets
+     by 1rem there, so adding another 1rem here (plus the assistant card's
+     own padding) left messages ~3rem from the screen edge while the fixed
+     composer sat at 1rem. From sm up the shell's inset grows and this
+     restores the original gutter. */
+  padding-left: 0;
+  padding-right: 0;
   padding-top: 3rem; /* Clear the fixed header (4rem) + small gap */
   padding-bottom: 7.5rem; /* Space for fixed input */
   min-width: 0;
 }
 
+@media (min-width: 640px) {
+  .chat-messages-container.full-page {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
 /* Sidenav-aware positioning for lg screens */
 @media (min-width: 1024px) {
   .chat-input-footer.full-page.sidenav-expanded,
diff --git a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
index 5982df395..933103c95 100644
--- a/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
+++ b/frontend/ai.client/src/app/session/components/chat-container/chat-container.component.html
@@ -22,7 +22,7 @@
 
 <!-- Skeleton loading state -->
 @if (showSkeleton()) {
-  <div class="relative pb-30 pt-16 max-w-[720px] mx-auto px-4 py-6 min-w-0">
+  <div class="relative pb-30 pt-16 max-w-[720px] mx-auto sm:px-4 py-6 min-w-0">
     <div class="min-w-0 animate-fade-in">
       <app-paragraph-skeleton />
     </div>
diff --git a/frontend/ai.client/src/app/session/components/message-list/message-list.component.html b/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
index 271faec7f..840150353 100644
--- a/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
+++ b/frontend/ai.client/src/app/session/components/message-list/message-list.component.html
@@ -33,7 +33,7 @@
           class="group relative min-w-0"
           role="group"
           aria-label="Assistant message with metadata">
-            <div class="rounded-2xl bg-gray-50 px-4 py-3 text-base/6 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-hidden">
+            <div class="rounded-2xl bg-gray-50 px-0 sm:px-4 py-3 text-base/6 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-hidden">
                 <app-assistant-message
                   class="min-w-0 block"
                   [messages]="segment.messages"