diff --git a/frontend/packages/agent/src/agent.css b/frontend/packages/agent/src/agent.css
index 64ed0fc..72318bb 100644
--- a/frontend/packages/agent/src/agent.css
+++ b/frontend/packages/agent/src/agent.css
@@ -322,17 +322,26 @@ pre.diff {
   max-height: 16em;
   overflow-y: auto;
 }
+/* Inbox / loose-ends rows: header (from / sep / ts) on one line,
+   body on its own line below — gives the body the full panel width
+   instead of squeezing it into a fourth grid column that wrapped
+   long messages over many narrow lines (issue #376). */
 .agent-inbox li {
-  padding: 0.15em 0;
-  display: grid;
-  grid-template-columns: auto auto auto 1fr;
-  gap: 0.5em;
-  align-items: baseline;
+  padding: 0.4em 0;
+  display: block;
 }
-.agent-inbox .inbox-ts   { color: var(--muted); font-size: 0.9em; }
+.agent-inbox .inbox-ts   { color: var(--muted); font-size: 0.9em; margin-left: 0.5em; }
 .agent-inbox .inbox-from { color: var(--amber); }
-.agent-inbox .inbox-sep  { color: var(--muted); }
-.agent-inbox .inbox-body { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
+.agent-inbox .inbox-sep  { color: var(--muted); margin-left: 0.4em; }
+.agent-inbox .inbox-body {
+  display: block;
+  color: var(--fg);
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin-top: 0.3em;
+  padding-left: 0.8em;
+  border-left: 2px solid var(--purple-dim);
+}
 .agent-inbox li.inbox-reply {
   padding-left: 1em;
   border-left: 2px solid var(--border);
@@ -341,11 +350,14 @@ pre.diff {
 .agent-inbox .inbox-reply-tag { color: var(--muted); font-size: 0.85em; }
 
 .agent-inbox .answer-form {
-  grid-column: 1 / -1;
+  /* Block-level under the new layout — `grid-column: 1 / -1` was
+     for the legacy grid; under block layout the form naturally
+     starts on its own row. */
   display: flex;
   gap: 0.4em;
   align-items: flex-start;
-  margin-top: 0.25em;
+  margin-top: 0.5em;
+  padding-left: 0.8em;
 }
 .agent-inbox .answer-form textarea {
   flex: 1;