diff --git a/web/src/structured.ts b/web/src/structured.ts
index f605544..8e9af9d 100644
--- a/web/src/structured.ts
+++ b/web/src/structured.ts
@@ -113,7 +113,10 @@ export function createStructuredConnection(
           <button type="submit" class="btn btn-primary structured-send"><span>Send</span>
             <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 5 5 5-5 5M12 10H3"/></svg>
           </button>
-          <button type="button" class="btn structured-cancel" hidden>Cancel turn</button>
+          <button type="button" class="btn btn-icon structured-cancel" hidden aria-label="Cancel turn" title="Cancel turn">
+            <svg class="structured-cancel-spinner" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="50 14" stroke-linecap="round"/></svg>
+            <svg class="structured-cancel-stop" viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor"/></svg>
+          </button>
         </form>
       </div>
     </div>
diff --git a/web/src/styles.css b/web/src/styles.css
index c797ea8..e45eb60 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -2290,6 +2290,9 @@ input.leaf-rename:focus {
 .structured-main {
   min-width: 0;
   min-height: 0;
+  max-width: 820px;
+  margin-inline: auto;
+  width: 100%;
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -2306,9 +2309,6 @@ input.leaf-rename:focus {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  max-width: 820px;
-  margin-inline: auto;
-  width: 100%;
 }
 
 .structured-activity {
@@ -3104,7 +3104,7 @@ input.leaf-rename:focus {
 }
 
 .structured-composer:focus-within {
-  border-top-color: var(--accent);
+  border-top-color: var(--border);
 }
 
 .structured-input-wrap {
@@ -3220,7 +3220,9 @@ input.leaf-rename:focus {
 }
 
 .structured-composer .structured-cancel {
-  padding: 0 var(--sp-3);
+  position: relative;
+  width: 40px;
+  padding: 0;
   border-color: color-mix(in oklab, var(--danger) 35%, var(--border));
   color: var(--danger);
 }
@@ -3229,6 +3231,23 @@ input.leaf-rename:focus {
   background: var(--danger-tint);
 }
 
+.structured-cancel-stop {
+  width: 16px;
+  height: 16px;
+}
+
+.structured-cancel-spinner {
+  position: absolute;
+  inset: 4px;
+  width: auto;
+  height: auto;
+  animation: cancel-spin 0.8s linear infinite;
+}
+
+@keyframes cancel-spin {
+  to { transform: rotate(360deg); }
+}
+
 @media (max-width: 520px) {
   /* One row cannot hold a draft plus three controls at phone width — the
      draft gets a line of its own and the controls drop below it. */