<main>
  <div class="wrapper">
    <article class="flow">
      <div class="cluster">
        <div class="controls">
          <nav>
            Scroll to chat:
            <a href="#1">#1</a>
            <a href="#2">#2</a>
            <a href="#3">#3</a>
          </nav>
          <div class="control">
            <label for="scroll">scroll-behavior: smooth ?</label>
            <input id="scroll" type="checkbox" checked/>
          </div>
        </div>
        <div class="chat-ui">
  <div class="chat-titlebar">
    <h5 id="chat-label">Chat UI</h5>
    <div class="chat-avatar">
      <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
    </div>
  </div>
  
  <div class="chat-scrollview" tabindex="0" role="region" aria-labelled-by="chat-label">
    <div class="chat-messagelist">
            <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message" id="1">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
                  <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
        </section>
      </div>
      
      <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message" id="2">Hi!</div>
          <div class="chat-message">I'm a bot</div>        
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">Hi!</div>
          <div class="chat-message">I'm not a bot</div>
          <div class="chat-message">But I am static text that was put here by a human. The only dynamic stuff you'll find here is whatever someone types in the "say something" text area hehe.</div>
        </section>
      </div>
      
      <div class="chat-cluster">
        <div class="chat-avatar">
          <img src="https://cdn.dribbble.com/users/37530/screenshots/2937858/drib_blink_bot.gif" alt="">
        </div>
        <section>
          <h3>Learn CSS Bot</h3>
          <div class="chat-message">I see this chat implementation is using the `scroll-behavior` property...</div>
          <div class="chat-message">Can you tell me more about that?</div>
        </section>
      </div>
      
      <div mine class="chat-cluster">
        <section>
          <div class="chat-message">sure!</div>
          <div class="chat-message" id="3">`scroll-behavior` allows you to opt into browser controlled scrolling to elements. This allows you to specify how in-page navigation like `.scrollTo()` or links are handled.
</div>
          <div class="chat-message">Learn CSS can teach you more about overflow!</div>
        </section>
      </div>
      
    </div>
  </div>
  
  <div class="chat-authoring" contenteditable></div>
</div>
      </div>
    </article>
  </div>
</main>

:root {
  --var-scroll-behavior: 'smooth';
}

.chat-scrollview {
  scroll-behavior: var(--var-scroll-behavior);
}

@media (prefers-reduced-motion) {
  .chat-scrollview {
    scroll-behavior: auto;
  }
}

let root = document.documentElement;
const scroll = document.querySelector('#scroll');

const render = () => {
  root.style.setProperty('--var-scroll-behavior', scroll.checked ? "smooth" : "auto");
};

scroll.addEventListener('change', render);

render();