{% extends 'base.html.twig' %}

{% block title %}Serenia - Assistant Pédagogique{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {% if tool_color_details.serenia is defined %}
    <style>
        :root {
            --color-cohorts:       {{ tool_color_details.serenia.primary }};
            --color-cohorts-dark:  {{ tool_color_details.serenia.secondary }};
            --color-cohorts-hover: {{ tool_color_details.serenia.secondary }};
            --color-cohorts-light: {{ tool_color_details.serenia.border }};
        }
    </style>
    {% endif %}
{% endblock %}

{# Main occupe toute la hauteur de l'écran en flex colonne — fonctionne à tout niveau de zoom #}
{% block main_class %}p-0 bg-white flex flex-col h-screen overflow-hidden{% endblock %}

{% block body %}
{# ============================================================================
   SERENIA - Chat Interface
   ============================================================================
   Redesigned with Tailwind CSS and Atomic Design.
   Uses atoms: icon, avatar, badge, logo, spinner
   Uses molecules: mini-stat
   ============================================================================ #}


<div
    class="serenia flex flex-row flex-1 min-h-0 bg-white overflow-hidden"
    data-controller="seren-ia--chat"
    data-seren-ia--chat-user-id-value="{{ app.user.id }}"
    data-seren-ia--chat-tokens-remaining-value="{{ tokenStats.remaining }}"
    data-seren-ia--chat-energy-consumption-wh-value="{{ tokenStats.energyConsumptionWh }}"
    data-seren-ia--chat-user-initials-value="{{ userInitials }}"
    data-seren-ia--chat-session-uuid-value="{{ session is not null ? session.uuid : '' }}"
    data-seren-ia--chat-session-base-url-value="{{ path('app_seren_ia_session', {uuid: '__UUID__'}) }}"
    data-seren-ia--chat-chat-stream-url-value="{{ path('app_seren_ia_chat_stream') }}"
>
    {# Sidebar conversations #}
    {% include 'seren_ia/_conversation-sidebar.html.twig' with { sessions: sessions, currentSessionUuid: session is not null ? session.uuid : null, tokenStats: tokenStats } only %}

    {# Backdrop mobile pour la sidebar (cliquable pour fermer) #}
    <div
        class="hidden fixed inset-0 bg-black/40 z-40"
        data-seren-ia--chat-target="sidebarBackdrop"
        data-action="click->seren-ia--chat#toggleSidebar"
    ></div>

    {# Zone chat principale #}
    <div class="serenia__chat flex flex-col flex-1 min-w-0 min-h-0">

    {# Header mobile uniquement (hamburger + titre) #}
    <div class="md:hidden flex items-center gap-2.5 px-3 py-2.5 border-b border-gray-100 shrink-0 bg-white">
        <button
            class="w-8 h-8 flex items-center justify-center rounded-lg text-gray-500 hover:bg-gray-100 transition-all duration-fast"
            data-action="click->seren-ia--chat#toggleSidebar"
        >
            {% include '_atoms/icon/icon.html.twig' with { name: 'menu', size: 'sm', color: 'current' } only %}
        </button>
        <span class="text-sm font-semibold text-gray-800">Serenia</span>
    </div>

    {# ====================================================================
       BANDEAU « DISCUSSION PUBLIQUE »
       ====================================================================
       Contrepartie du mode « vivant » : la discussion partagée reste à jour, donc
       tout message écrit APRÈS le partage devient public. Ce rappel doit rester
       visible PENDANT la conversation, pas seulement au chargement — c'est sa
       seule raison d'être. D'où sa place ici : FRÈRE du conteneur de messages et
       non descendant, il ne défile pas avec le fil et ne peut pas être poussé
       hors de l'écran par les messages que chat_controller y ajoute.

       TOUJOURS RENDU, y compris sur /serenia/new où `session` vaut null, et c'est
       la correction d'un défaut réel : une garde `{% if session is not null %}`
       laissait tout le parcours le plus naturel de la fonctionnalité sans bandeau.
       L'utilisateur ouvre une discussion vierge, écrit — chat_controller crée la
       session et se contente d'un history.replaceState() suivi d'un rechargement de
       la SEULE turbo-frame de la sidebar, jamais de la page — puis partage depuis
       l'entrée « Partager » de cette sidebar, désormais pleinement fonctionnelle.
       Le bandeau, lui, n'était pas dans le DOM et n'y entrait qu'au prochain
       rechargement complet : discussion vivante et publique, sans aucun rappel.
       Le rechargement de la frame ne sauve rien, il aggrave — c'est lui qui rend
       « Partager » atteignable pendant que le bandeau est absent.

       Rendu vide et masqué quand il n'y a pas (encore) de discussion :
       #syncShareBanner adopte l'uuid au moment où le serveur confirme un partage
       pour la discussion COURANTE, et le révèle sans rechargement.

       DÉPENDANCE NON ÉCRITE AILLEURS — le style ci-dessous (state initial au
       chargement) et #syncShareBanner (état après un partage en direct) sont
       les DEUX SEULES écritures de ce bandeau. Aucune des deux ne se déclenche
       quand on passe d'une discussion à une autre : ce cas n'est couvert QUE
       parce que sidebar_controller.js#loadSession fait un window.location.href
       — une navigation PLEINE PAGE qui refait ce rendu Twig depuis zéro à
       chaque changement de discussion. Si la sidebar passait un jour en Turbo
       ou en XHR (fetch + remplacement du fragment de conversation sans
       recharger la page), ce bandeau resterait figé sur l'état de la
       discussion PRÉCÉDENTE : il continuerait d'afficher « publique » en
       ouvrant une discussion privée, ou l'inverse — et aucun test ne le
       détecterait, puisque rien ne rougirait côté serveur.
       ==================================================================== #}
    {# RESPONSIVE — pourquoi ces classes, et pas `flex-wrap` :
       `flex-wrap` ne suffisait pas. Le bloc de texte portait `min-w-0` (donc autorisé à
       tomber sous la largeur de son contenu) et le bloc d'actions `shrink-0` (donc refusant
       de rendre ses ~269 px). Le texte s'écrasait jusqu'à 0 px de large AVANT que le retour
       à la ligne ne soit seulement envisagé, la paire dépassait quand même, et le
       `overflow-hidden` des ancêtres (`main`, puis `.serenia`) cisaillait la droite —
       emportant la fin de l'URL et le bouton « Gérer ». Mesuré à 320 px : bandeau de 212 px,
       bloc d'actions de 268,5 px débordant de 90,5 px de son parent et de 57,5 px du
       viewport, « Gérer » hors écran.

       D'où : EMPILEMENT sous `lg` (`flex-col lg:flex-row`) plutôt que rétrécissement, le
       texte prend la place restante et RETOURNE À LA LIGNE (jamais de `truncate` : un
       bandeau tronqué n'annonce plus ce qu'il est censé annoncer), et le bloc d'actions
       perd son `shrink-0` pour occuper une ligne entière.

       Le point de bascule est `lg` et non `sm` PARCE QUE le panneau des conversations
       reprend sa place dans le flux dès `md` : à 768 px, la conversation ne fait plus que
       ~476 px et le bandeau ~428 px. Sur une seule ligne, le champ d'URL y tombait à 95 px,
       soit une dizaine de caractères — mesuré. Empiler jusqu'à 1024 px coûte une ligne de
       hauteur et rend le lien lisible sur toute la plage tablette.

       `flex` doit rester un jeton LITTÉRAL de la classe : #syncShareBanner révèle le bandeau
       en écrivant `style.display = ''`, il retire le style inline et laisse la classe
       reprendre la main. Un `lg:flex` seul laisserait le bandeau en `display:block`
       sous 1024 px. #}
    <div class="shrink-0 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 lg:gap-3 mx-4 sm:mx-6 lg:mx-8 mt-3 px-4 py-2.5 rounded-xl bg-amber-50 border border-amber-200"
         data-seren-ia--chat-target="shareBanner"
         style="{{ session is not null and session.isShared ? '' : 'display:none' }}">
        <div class="flex items-start lg:items-center gap-2 min-w-0 text-amber-900">
            {% include '_atoms/icon/icon.html.twig' with { name: 'share', size: 'sm', color: 'current', class: 'mt-0.5 lg:mt-0' } only %}
            <span class="text-[13px] leading-snug">
                Cette discussion est <strong>publique</strong> : tout nouveau message y sera visible.
            </span>
        </div>
        {# Plus de `shrink-0` : c'est lui qui gelait 269 px et poussait « Gérer » hors du
           cadre. `min-w-0` autorise le champ à se réduire, `shrink-0` reste sur le SEUL
           bouton — l'accès à la gestion du partage ne doit jamais être le premier sacrifié. #}
        <div class="flex items-center gap-2 min-w-0 w-full lg:w-auto">
            <input type="text" readonly
                   aria-label="Lien public de la discussion"
                   data-seren-ia--chat-target="shareUrl"
                   {# `w-full lg:w-56` est une LARGEUR, jamais un `flex-none` : le bloc
                      d'actions n'a plus de `shrink-0`, il peut donc lui-même se réduire, et
                      un enfant rigide à 224 px le déborderait aussitôt — mesuré à 768 px, où
                      le bloc tombait à 139 px et rejetait « Gérer » 88 px hors du viewport.
                      `min-w-0` neutralise la largeur intrinsèque du champ (un `input` refuse
                      autrement de passer sous sa taille par défaut) : le champ se contente
                      de la place restante, « Gérer » garde la sienne. #}
                   class="text-[11px] text-amber-900 bg-white border border-amber-200 rounded-lg px-2 py-1 w-full lg:w-56 min-w-0 select-all focus:outline-none"
                   value="{{ session is not null and session.isShared ? url('app_public_serenia_show', {token: session.shareToken}) : '' }}">
            {# Les QUATRE attributs que share_link_controller.js#open() lit sur son
               déclencheur : n'en poser qu'un laisserait son dataset à moitié initialisé,
               et la modale s'ouvrirait sur un état inventé. Tous rendus, même vides,
               pour que #syncShareBanner n'ait qu'à les mettre à jour — jamais à deviner
               lesquels existent. #}
            <button type="button"
                    class="shrink-0 text-[13px] font-semibold text-amber-900 underline underline-offset-2 cursor-pointer hover:text-amber-950"
                    data-action="click->seren-ia--chat#openShareModal"
                    data-uuid="{{ session is not null ? session.uuid : '' }}"
                    data-shared="{{ session is not null and session.isShared ? '1' : '0' }}"
                    data-download="{{ session is not null and session.isShareDownloadEnabled ? '1' : '0' }}"
                    data-share-url="{{ session is not null and session.isShared ? url('app_public_serenia_show', {token: session.shareToken}) : '' }}">
                Gérer
            </button>
        </div>
    </div>

    {# ====================================================================
       MESSAGES CONTAINER
       ==================================================================== #}
    <div
        class="serenia-messages flex-1 min-h-0 overflow-y-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-col gap-4 bg-white scrollbar-none"
        data-seren-ia--chat-target="messagesContainer"
    >
        {# Welcome Message #}
        <div class="seren-ia__welcome flex flex-col items-center justify-center my-auto max-w-lg mx-auto w-full py-6 sm:py-10 px-4 sm:px-0">

            {# Icône #}
            <div class="w-14 h-14 rounded-2xl bg-cohorts/[0.10] flex items-center justify-center mb-5 shrink-0">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'bubul-serenia',
                    size: '2xl',
                    color: 'cohorts'
                } only %}
            </div>

            {# Greeting #}
            <h2 class="text-2xl sm:text-3xl font-secondary font-bold text-gray-900 mb-1.5 text-center">
                Bonjour, {{ app.user.firstName }}
            </h2>
            <p class="text-sm text-gray-400 text-center mb-7 sm:mb-9">
                Comment puis-je vous aider aujourd'hui ?
            </p>

            {# Panneau de préférences compact #}
            <div class="w-full bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden mb-4">

                {# Style #}
                <div class="flex items-center gap-3 px-4 py-3" data-seren-ia--chat-target="styleRow"
                     data-tour-step="serenia-style">
                    <span class="text-[9.5px] font-bold uppercase tracking-widest text-gray-400 w-10 text-right shrink-0">Style</span>
                    <span class="w-px h-4 bg-gray-200 shrink-0"></span>
                    <div class="flex gap-1.5 flex-wrap">
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-cohorts/[0.12] text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectStyle"
                            data-seren-ia--chat-target="styleCard"
                            data-style="bienveillant">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'xs', color: 'current' } only %}
                            Bienveillant
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectStyle"
                            data-seren-ia--chat-target="styleCard"
                            data-style="direct">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'xs', color: 'current' } only %}
                            Direct
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectStyle"
                            data-seren-ia--chat-target="styleCard"
                            data-style="creatif">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'magic-stick', size: 'xs', color: 'current' } only %}
                            Créatif
                        </button>
                    </div>
                </div>

                <div class="h-px bg-gray-50 mx-4"></div>

                {# Mode #}
                <div class="flex items-center gap-3 px-4 py-3" data-tour-step="serenia-mode">
                    <span class="text-[9.5px] font-bold uppercase tracking-widest text-gray-400 w-10 text-right shrink-0">Mode</span>
                    <span class="w-px h-4 bg-gray-200 shrink-0"></span>
                    <div class="flex gap-1.5 flex-wrap">
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-cohorts/[0.12] text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectMode"
                            data-seren-ia--chat-target="modeCard"
                            data-mode="basique">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'dialog', size: 'xs', color: 'current' } only %}
                            Basique
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectMode"
                            data-seren-ia--chat-target="modeCard"
                            data-mode="analyse">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'book-open', size: 'xs', color: 'current' } only %}
                            Analyse
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectMode"
                            data-seren-ia--chat-target="modeCard"
                            data-mode="creation">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'xs', color: 'current' } only %}
                            Création
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectMode"
                            data-seren-ia--chat-target="modeCard"
                            data-mode="pedagogique">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'heart', size: 'xs', color: 'current' } only %}
                            Pédagogique
                        </button>
                    </div>
                </div>

                <div class="h-px bg-gray-50 mx-4"></div>

                {# Modèle IA #}
                <div class="flex items-center gap-3 px-4 py-3" data-tour-step="serenia-modele">
                    <span class="text-[9.5px] font-bold uppercase tracking-widest text-gray-400 w-10 text-right shrink-0">IA</span>
                    <span class="w-px h-4 bg-gray-200 shrink-0"></span>
                    <div class="flex gap-1.5 flex-wrap">
                        <button type="button"
                            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectModel"
                            data-seren-ia--chat-target="modelCard"
                            data-model="gpt-4.1-mini">
                            <span class="w-1.5 h-1.5 rounded-full bg-green-400 shrink-0"></span>
                            Rapide
                            <span class="text-[9px] opacity-50 font-normal">1×</span>
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-cohorts/[0.12] text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectModel"
                            data-seren-ia--chat-target="modelCard"
                            data-model="gpt-5.6-luna">
                            <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 shrink-0"></span>
                            Standard
                            <span class="text-[9px] opacity-50 font-normal">≈ 3×</span>
                        </button>
                        <button type="button"
                            class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[11.5px] font-medium transition-all duration-fast cursor-pointer bg-gray-100 text-gray-500 hover:bg-cohorts/[0.08] hover:text-cohorts-dark"
                            data-action="click->seren-ia--chat#selectModel"
                            data-seren-ia--chat-target="modelCard"
                            data-model="o4-mini">
                            <span class="w-1.5 h-1.5 rounded-full bg-red-400 shrink-0"></span>
                            Complexe
                            <span class="text-[9px] opacity-50 font-normal">≈ 10×</span>
                        </button>
                    </div>
                </div>

            </div>

            {# Alerte modèle — affichée par JS quand Complexe (o4-mini) sélectionné #}
            <div
                class="hidden items-start gap-2 px-3.5 py-2.5 bg-error/5 border border-error/15 rounded-xl w-full mb-4"
                data-seren-ia--chat-target="modelAlert"
            >
                <span class="text-error text-sm shrink-0 mt-0.5">⚠️</span>
                <p class="text-[11px] text-error-dark leading-relaxed">
                    Ce modèle de raisonnement réfléchit avant de répondre, et cette réflexion est facturée sans être visible. Comptez <strong>10× plus de tokens</strong> qu'un message Rapide, avec de fortes variations selon la question. À réserver aux problèmes qui demandent vraiment de la déduction.
                </p>
            </div>

            {# Security notice #}
            <p class="text-[11px] text-gray-400 text-center flex items-center gap-1.5">
                {% include '_atoms/icon/icon.html.twig' with { name: 'shield', size: 'xs', color: 'current' } only %}
                Données protégées · Conversations chiffrées
            </p>

        </div>

        {# Messages de la session chargée — lus par chat_controller.js au connect() #}
        {% if messages is defined and messages|length > 0 %}
            {% for message in messages %}
                <div class="seren-ia__message-{{ message.role }}"
                     data-role="{{ message.role }}"
                     data-content="{{ message.content|e('html_attr') }}"
                     data-token-count="{{ message.tokenCount ?? 0 }}"
                     style="display: none;"
                ></div>
            {% endfor %}
        {% endif %}
    </div>

    {# ====================================================================
       INPUT AREA
       ==================================================================== #}
    <div class="serenia-input-wrapper shrink-0 bg-white border-t border-gray-100 px-4 sm:px-5 lg:px-6 pt-3 pb-4">
        {# Uploaded files display #}
        <div
            class="serenia-files flex flex-wrap gap-2 mb-3"
            data-seren-ia--chat-target="filesContainer"
            style="display: none;"
        ></div>

        {# Input bar #}
        <div class="serenia-input-bar flex items-end gap-2 bg-gray-50 border border-gray-200 rounded-2xl px-3 py-2 transition-all duration-base focus-within:border-cohorts/40 focus-within:bg-white focus-within:shadow-[0_0_0_3px_rgb(139_92_246_/_0.10)]"
             data-tour-step="serenia-saisie">
            {# Attach button #}
            <button
                type="button"
                class="flex items-center justify-center w-9 h-9 rounded-xl text-gray-400 hover:text-primary hover:bg-primary/5 transition-all duration-fast shrink-0 mb-0.5"
                data-action="click->seren-ia--chat#triggerFileUpload"
                data-tooltip="Joindre un fichier"
            >
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'upload',
                    size: 'md',
                    color: 'current'
                } only %}
            </button>

            {# Textarea #}
            <textarea
                class="serenia-textarea flex-1 bg-transparent border-none resize-none outline-none text-sm text-gray-900 placeholder:text-gray-400 leading-relaxed py-2 px-1 max-h-[200px] overflow-y-auto font-primary"
                data-seren-ia--chat-target="messageInput"
                data-action="keydown->seren-ia--chat#handleKeydown"
                placeholder="Posez votre question pédagogique..."
                rows="1"
            ></textarea>

            {# Voice button #}
            <button
                type="button"
                class="seren-ia__voice-btn flex items-center justify-center w-9 h-9 rounded-xl text-gray-400 hover:text-primary hover:bg-primary/5 transition-all duration-fast shrink-0 mb-0.5"
                data-seren-ia--chat-target="voiceButton"
                data-action="click->seren-ia--chat#toggleVoice"
                data-tooltip="Saisie vocale"
            >
                {% include '_atoms/icon/solar/microphone.html.twig' with {size: 20} %}
            </button>

            {# Send button #}
            <button
                type="button"
                class="flex items-center justify-center w-9 h-9 rounded-xl bg-gradient-to-br from-cohorts-dark via-cohorts to-cohorts-light text-white shadow-sm shadow-cohorts/20 hover:shadow-cohorts/50 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-base disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0 disabled:hover:shadow-sm shrink-0 mb-0.5"
                data-action="click->seren-ia--chat#sendMessage"
                data-seren-ia--chat-target="sendButton"
            >
                {% include '_atoms/icon/icon.html.twig' with {
                    name: 'send',
                    size: 'sm',
                    color: 'white'
                } only %}
            </button>

            {# Hidden file input #}
            <input
                type="file"
                data-seren-ia--chat-target="fileInput"
                data-action="change->seren-ia--chat#handleFileSelect"
                style="display: none;"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.csv"
                multiple
            />
        </div>

        {# Footer disclaimer #}
        <div class="text-center pt-2">
            <span class="text-[10px] text-gray-300 leading-normal">L'IA peut faire des erreurs. Vérifiez les informations importantes.</span>
        </div>
    </div>

    {# ====================================================================
       HIDDEN ELEMENTS (used by Stimulus controller)
       ==================================================================== #}

    {# Token notification template #}
    <div class="serenia-token-notification fixed flex items-center gap-1 text-base font-semibold text-error z-50 pointer-events-none" data-seren-ia--chat-target="tokenNotification" style="display: none;">
        {% include '_atoms/icon/icon.html.twig' with {
            name: 'token',
            size: 'sm',
            color: 'error'
        } only %}
        <span data-seren-ia--chat-target="tokenNotificationText"></span>
    </div>

    {# Site logo template for assistant messages #}
    <div class="seren-ia__site-logo-template" data-seren-ia--chat-target="siteLogoTemplate" style="display: none;">
        {% include '_atoms/logo/logo.html.twig' with { variant: 'simple', size: 'sm' } %}
    </div>
    </div>{# end serenia__chat #}
</div>

{# ============================================================================
   MODALE DE PARTAGE — un seul exemplaire par page
   ============================================================================
   HORS du {% if session is not null %} du bandeau, et c'est délibéré : c'est cette
   molécule qui rend le jeton CSRF 'share_link' dans le DOM, y compris sur
   /serenia/new où aucune discussion n'est encore ouverte. La restreindre aux pages
   de session priverait SereniaShareEndpointTest du jeton qu'il y lit.
   `withDownload: false` : une discussion ne se télécharge pas. Le contrôleur
   shared--share-link tolère l'absence de la case (cf. son docblock de tête).
   ============================================================================ #}
{% include '_molecules/share-link/share-link-modal.html.twig' with {
    endpoint: path('app_seren_ia_share_update', {uuid: '__UUID__'})|replace({'__UUID__': '{uuid}'}),
    accentHex: tool_color_details['serenia'].primary,
    withDownload: false
} only %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}