Fix: Neural Brain chat tile rendered collapsed

The inline Neural Brain chat tile (#leftChat) rendered with its messages squeezed into a ~30px-wide column and the input box overflowing the left panel. The cause was malformed markup, not CSS.

Symptom

With the Chat tab active, the DOM collapsed into the chat header:

• div.brain-chat-header > div#brainMessages: message column ~30px wide instead of full width.
• div.brain-chat-header > div.brain-chat-input: input overflowing the panel (333px wide inside a 329px panel).

#leftChat is a flex-direction: column tile and its five regions are meant to be direct siblings. Because they were nested inside the header row instead, they inherited display: flex; align-items: center and collapsed.

Root cause

index.html had a duplicated opening <div class="brain-chat-header"> tag with only one matching </div>:

index.html: before

<div class="brain-chat-header">
  <div class="brain-chat-header">
  <strong class="brain-chat-title">Neural Brain</strong>
  …status · close…
</div>
<!-- chat-context, brainMessages, quick-prompts, brain-chat-input
     were now all trapped INSIDE the header -->

The unbalanced tag pushed .chat-context, #brainMessages, .quick-prompts, and .brain-chat-input inside the header, so the column layout never applied.

Fix

Removed the duplicate opening tag so the header self-closes and the five regions are siblings again:

index.html: after

<div class="brain-chat-header">
  <strong class="brain-chat-title">Neural Brain</strong>
  <span class="brain-chat-status-inline">…</span>
  <button class="brain-chat-close" id="closeBrainChat">&times;</button>
</div>
<div class="chat-context">…</div>
<div class="brain-chat-messages" id="brainMessages">…</div>
<div class="quick-prompts">…</div>
<div class="brain-chat-input">…</div>

No CSS changed: the stylesheet (.brain-chat-messages { flex: 1 }, the column container, the input row) was already correct. See the UI guide for the sibling contract that this tile depends on.