diff --git a/public/components/assistant.html b/public/components/assistant.html
index 8c17933..8025ae3 100644
--- a/public/components/assistant.html
+++ b/public/components/assistant.html
@@ -144,6 +144,8 @@
 .assistant-composer textarea:focus, .assistant-side textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); }
 .assistant-composer-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; }
 .assistant-composer-footer .btn-generate { width:auto; margin:0; padding:9px 18px; }
+.assistant-composer-footer #btn-assistant-cancel[hidden] { display:none !important; }
+.assistant-composer-footer #btn-assistant-cancel:not([hidden]) { display:inline-flex; }
 .assistant-check { font-size:12px; color:var(--g500); display:flex; align-items:center; gap:6px; }
 .assistant-side { display:grid; gap:12px; }
 .assistant-side-body { padding:12px; display:grid; gap:10px; font-size:13px; }
@@ -199,6 +201,7 @@
   .assistant-composer { position:sticky; bottom:0; z-index:3; }
   .assistant-composer-footer { flex-direction:column; align-items:stretch; }
   .assistant-composer-footer .btn-generate { width:100%; }
+  .assistant-composer-footer #btn-assistant-cancel:not([hidden]) { width:100%; justify-content:center; }
   .assistant-side { gap:10px; }
 }
 </style>
diff --git a/public/js/clinicalAssistant.js b/public/js/clinicalAssistant.js
index 458e03e..1ea2072 100644
--- a/public/js/clinicalAssistant.js
+++ b/public/js/clinicalAssistant.js
@@ -829,8 +829,10 @@ import {
     }
     if (cancel) {
       var canCancel = !!isBusy && !!activeAssistantRequest;
-      cancel.hidden = !canCancel;
+      if (canCancel) cancel.removeAttribute('hidden');
+      else cancel.setAttribute('hidden', '');
       cancel.disabled = !canCancel;
+      cancel.style.display = canCancel ? 'inline-flex' : 'none';
     }
     if (input) input.disabled = !!isBusy;
   }