diff --git a/app/templates/support/_transcript.html b/app/templates/support/_transcript.html
index fcc3c03..f546a84 100644
--- a/app/templates/support/_transcript.html
+++ b/app/templates/support/_transcript.html
@@ -1,16 +1,27 @@
 {# Read-only chat transcript. Expects `messages` (list of SupportChatMessage). #}
 <style>
-  .cbubble { max-width:80%; padding:.6rem .9rem; border-radius:1rem; font-size:.9rem;
-             line-height:1.5; white-space:pre-wrap; word-break:break-word; }
-  .cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.25rem; }
-  .cbubble-ai   { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.25rem; }
+  .ctranscript { background:#f8f9fa; padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
+  .cbubble-row { display:flex; align-items:flex-start; }
+  .cbubble {
+    max-width:72%;
+    width:fit-content;
+    padding:.45rem .7rem;
+    border-radius:.9rem;
+    font-size:.85rem;
+    line-height:1.45;
+    white-space:pre-wrap;
+    word-break:break-word;
+  }
+  .cbubble-user { background:#0d6efd; color:#fff; border-bottom-right-radius:.2rem; }
+  .cbubble-ai   { background:#fff; border:1px solid #dee2e6; border-bottom-left-radius:.2rem; }
+  .cbubble-meta { font-size:.66rem; opacity:.55; margin-top:.2rem; }
 </style>
-<div class="p-3" style="background:#f8f9fa;">
+<div class="ctranscript">
   {% for m in messages %}
-  <div class="d-flex mb-2 {{ 'justify-content-end' if m.role == 'user' else 'justify-content-start' }}">
+  <div class="cbubble-row {{ 'justify-content-end' if m.role == 'user' else 'justify-content-start' }}">
     <div class="cbubble {{ 'cbubble-user' if m.role == 'user' else 'cbubble-ai' }}">
       {{ m.content }}
-      <div class="mt-1" style="font-size:.7rem;opacity:.6;">
+      <div class="cbubble-meta">
         {{ 'You' if m.role == 'user' else 'JQC Assistant' }} · {{ m.created_at.strftime('%b %d, %I:%M %p') }}
       </div>
     </div>