Project planning

<div class="app is-locked">
  <aside class="sidebar" id="chatList" aria-label="Conversations">
    <div class="sidebar-brand">Assistant</div>
    <div class="sidebar-section">
      <div class="sidebar-heading">Recent</div>
      <div class="conversation-list">
        <a class="sidebar-link" href="#" aria-current="page">…<span class="sidebar-label">Project planning</span></a>
      </div>
    </div>
  </aside>

  <div class="main">
    <header class="navbar" role="banner">
      <button class="hamburger" type="button" data-menu-toggle="chatList"
              aria-controls="chatList" aria-expanded="false" aria-label="Toggle conversations">…</button>
      <div class="chat-head">
        <h1 class="card-title truncate">Project planning</h1>
        <span class="card-desc">GPT-class model · streaming on</span>
      </div>
      <div class="nav-spacer"></div>
    </header>

    <div class="thread" id="messages" role="log" aria-live="polite">
      <div class="msg ai">
        <span class="avatar" aria-hidden="true">A</span>
        <div class="bubble">Hi! How can I help?</div>
      </div>
      <div class="msg user">
        <span class="avatar" aria-hidden="true">U</span>
        <div class="bubble">…</div>
      </div>
      <div class="msg ai typing">
        <span class="avatar" aria-hidden="true">A</span>
        <div class="bubble"><i></i><i></i><i></i></div>
      </div>
      <div class="msg ai is-streaming">
        <span class="avatar" aria-hidden="true">A</span>
        <div class="bubble">tokens still arriving…</div>
      </div>
    </div>

    <div class="composer">
      <div class="composer-form">
        <div class="field">
          <label class="sr-only" for="prompt">Message</label>
          <textarea id="prompt" rows="1" placeholder="Message..."></textarea>
        </div>
        <button class="btn-primary btn-icon" type="button" aria-label="Send message">…</button>
      </div>
    </div>
  </div>
</div>