fix(agents): style tables, headings and quotes in agent messages (#1324)

Agent replies only styled paragraphs, lists and code, so tables, headings, quotes, rules, images and task lists fell back to browser defaults: a 26px h1, a quote indented 40px, table columns squeezed to a few letters by overflow-wrap. They now get chat-sized styles from tokens; wide tables scroll sideways.

Closes #1273

Co-authored-by: ntbang0901 <[email protected]>

src/features/agents/Session.module.css

@@ -262,6 +262,7 @@
   background: var(--bg-elev);
 }
 .markdown :global(pre) {
+  margin: 0 0 8px;
   padding: 8px 10px;
   border-radius: var(--radius-small);
   background: var(--bg-elev);
@@ -352,6 +353,60 @@
 .markdown :global(a) {
   color: var(--link);
 }
+.markdown :global(table) {
+  display: block;
+  margin: 0 0 8px;
+  overflow: auto;
+  border-collapse: collapse;
+}
+.markdown :global(th),
+.markdown :global(td) {
+  /* `overflow-wrap: anywhere` from .markdown would otherwise squeeze a column to a few letters. */
+  min-width: 6em;
+  border: 1px solid var(--border);
+  padding: 4px 8px;
+}
+.markdown :global(h1),
+.markdown :global(h2),
+.markdown :global(h3),
+.markdown :global(h4),
+.markdown :global(h5),
+.markdown :global(h6) {
+  margin: 12px 0 6px;
+  color: var(--fg-strong);
+  font-size: 1em;
+  line-height: 1.3;
+}
+.markdown :global(h1) {
+  font-size: 1.15em;
+}
+.markdown :global(h2) {
+  font-size: 1.08em;
+}
+.markdown :global(blockquote) {
+  margin: 0 0 8px;
+  padding: 0 10px;
+  border-left: 3px solid var(--border-strong);
+  color: var(--fg-secondary);
+}
+.markdown :global(hr) {
+  margin: 8px 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+.markdown :global(img) {
+  max-width: 100%;
+}
+.markdown :global(li:has(> input[type="checkbox"])) {
+  margin-left: -20px;
+  list-style: none;
+}
+.markdown > :global(:first-child) {
+  margin-top: 0;
+}
+.markdown > :global(:last-child) {
+  margin-bottom: 0;
+}
 
 .thought summary,
 .toolDetails > summary {