{#- chirp-ui: Chat Layout component
    Structure for chat pages: messages panel + optional activity sidebar + input area.
    Eliminates inline styles for common chat patterns.

    Usage:
        {% from "chirpui/chat_layout.html" import chat_layout %}

        {% call chat_layout(show_activity=true, fill=true) %}
        {% slot messages %}
            <ul class="chirpui-message-thread">...</ul>
        {% end %}
        {% slot input %}
            <div class="chirpui-chat-input">...</div>
        {% end %}
        {% slot activity %}
            <aside>Model info, suggestions...</aside>
        {% end %}
        {% end %}

    fill=true: adds chirpui-chat-layout--fill. For SSE/HTMX roots inside the messages
    slot, add class chirpui-chat-layout__messages-body on the wrapper (see LAYOUT-VERTICAL.md).
-#}

{% def chat_layout(show_activity=false, cls="", fill=false) %}
<div class="chirpui-chat-layout{{ " chirpui-chat-layout--fill" if fill else "" }}{{ " " ~ cls if cls else "" }}">
    <div class="chirpui-chat-layout__main">
        <div class="chirpui-chat-layout__messages">
            {% slot messages %}
        </div>
        <div class="chirpui-chat-layout__input">
            {% slot input %}
        </div>
    </div>
    {% if show_activity %}
    <aside class="chirpui-chat-layout__activity">
        {% slot activity %}
    </aside>
    {% end %}
</div>
{% end %}