/*
 * Chat de construction de frise.
 *
 * Uniquement des tokens de admin-apple.css, aucune valeur en dur. Tous les sélecteurs
 * sont préfixés .fc- et portés par .frise-chat-page, pour ne rien déborder ailleurs.
 *
 * chat.css n'est volontairement pas réutilisé : il est bâti pour un widget flottant en
 * position fixed, et cible `.message.assistant *` en !important pour styler du HTML
 * injecté — une pratique que ce chat n'a pas.
 */

/* La conversation et la frise remplissent toute la hauteur de l'écran sous le titre
   de la page, quelle qu'elle soit. Chaque niveau prend ce qui reste : le contenu de
   la page occupe l'écran moins la barre de navigation, le cadre occupe le contenu
   moins le titre. Le pied de page reste plus bas, à portée de défilement. */
.frise-chat-page main {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--hauteur-navbar));
    min-height: 520px;
}

.frise-chat-page .apple-container {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    /* Le cadre descend jusqu'au bas de l'écran, à une respiration près. */
    padding-bottom: var(--spacing-md);
}

.fc-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 0;
}

/* ------------------------------------------------------------------ */
/* La conversation, et la frise en dessous                              */
/* ------------------------------------------------------------------ */

.fc-grid {
    /* Un seul cadre : en tête la frise en cours, puis la conversation et la frise.
       Sur un téléphone, l'une sous l'autre ; sur un écran large, côte à côte. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.fc-col {
    display: flex;
    flex: 4 1 0;
    flex-direction: column;
    /* Sans min-height: 0, un enfant flex refuse de rétrécir et le scroll interne casse. */
    min-height: 0;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    overflow: hidden;
    position: relative;
}

.fc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Un peu d'air entre les bulles et la barre de défilement. */
    padding-right: var(--spacing-sm);
    /* Empêche le défilement de « fuir » vers la page une fois arrivé en haut du fil. */
    overscroll-behavior: contain;
}

/* Empilées, la conversation et la frise se partagent la hauteur à 80/20. Celle où
   l'on fait défiler, touche ou clique prend les 80 % : le contrôleur du chat pose
   .fc-focus-frise, le partage s'inverse en glissant. Quand la frise se remplit, c'est
   elle qui défile, jamais la conversation qui se fait bousculer. Sa mise en page
   vient tout entière de frise-public-paysage.css — rien ici ne la redessine. Un
   filet la sépare de la conversation, pas un cadre. */
.fc-frise {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid var(--apple-gray-medium);
}

@media (max-width: 991.98px) {
    .fc-col,
    .fc-frise {
        transition: flex-grow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .fc-grid.fc-focus-frise > .fc-col {
        flex-grow: 1;
    }

    .fc-grid.fc-focus-frise > .fc-frise {
        flex-grow: 4;
    }
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .fc-col,
    .fc-frise {
        transition: none;
    }
}

/* Écran large : la frise à droite de la conversation, sur toute la hauteur. */
@media (min-width: 992px) {
    .fc-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .fc-grid > .fc-chat-tete {
        grid-column: 1 / -1;
    }

    .fc-col,
    .fc-frise {
        grid-row: 2;
        height: auto;
    }

    .fc-frise {
        border-top: 0;
        border-left: 1px solid var(--apple-gray-medium);
    }

}

.fc-frise-corps {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* La frise occupe tout le cadre, pour que sa barre de défilement horizontale soit
   au bas du cadre et non sous la bande. La bande, elle, se centre dans la hauteur ;
   « safe » : plus haute que le cadre, elle repart du haut et la frise défile aussi
   verticalement. */
.fc-frise-corps > .timeline-wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.fc-frise .timeline-wrapper > .timeline {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    align-content: safe center;
}

/* La frise publique s'écarte de son pied de page ; ici, elle touche le bas du cadre. */
.fc-frise .timeline-wrapper {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Bulles                                                               */
/* ------------------------------------------------------------------ */

.fc-msg {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    align-items: flex-start;
}

.fc-msg--user { justify-content: flex-end; }

.fc-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--apple-blue), var(--apple-blue-dark));
    color: var(--apple-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
}

.fc-bubble {
    max-width: 82%;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    line-height: 1.5;
    font-size: var(--font-size-base);
    word-break: break-word;
}

.fc-msg--user .fc-bubble {
    background: var(--apple-blue);
    color: var(--apple-white);
    border-bottom-right-radius: var(--radius-sm);
    white-space: pre-wrap;
}

/* Avant que le contrôleur ne prenne la main, et si le JavaScript ne s'exécute pas. */
.fc-bubble--brut {
    white-space: pre-wrap;
}

.fc-msg--assistant .fc-bubble {
    background: var(--apple-gray-bg);
    color: var(--apple-text-primary);
    border-bottom-left-radius: var(--radius-sm);
}

/* On ne cible que les balises que le renderer sait produire — jamais un sélecteur
   universel avec !important, qui n'a de sens que pour du HTML injecté. */
.fc-bubble p { margin: 0 0 .5em; }
.fc-bubble p:last-child { margin-bottom: 0; }
.fc-bubble h4 {
    margin: .6em 0 .3em;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.fc-bubble ul,
.fc-bubble ol { margin: .35em 0; padding-left: 1.25em; }
.fc-bubble li { margin: .15em 0; }
.fc-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: rgba(0, 0, 0, .06);
    padding: .05em .3em;
    border-radius: 4px;
}

/* Curseur de frappe, accroché au dernier bloc pour rester sur la ligne de texte
   plutôt que de sauter à la ligne suivante. */
.fc-bubble--typing p:last-child::after,
.fc-bubble--typing li:last-child::after,
.fc-bubble--typing h4:last-child::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--apple-text-secondary);
    animation: fcCaret 1s step-end infinite;
}

@keyframes fcCaret {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Indicateur d'attente : dans le fil, à l'emplacement de la future réponse. */
/* Les nouveautés : un message de l'assistant, mais qui se distingue d'une réponse
   ordinaire, pour qu'on sache qu'il présente l'outil et ne répond à rien. */
.fc-msg--nouveautes .fc-avatar {
    background: linear-gradient(135deg, #5856d6, var(--apple-blue));
    color: var(--apple-white);
}

.fc-msg--nouveautes .fc-bubble {
    background: linear-gradient(135deg, rgba(88, 86, 214, 0.08), rgba(0, 122, 255, 0.08));
    border: 1px solid rgba(88, 86, 214, 0.25);
}

.fc-msg--nouveautes ul {
    margin: var(--spacing-xs) 0 0;
    padding-left: 1.2em;
}

.fc-msg--nouveautes li + li { margin-top: 4px; }

.fc-nouveautes-titre {
    margin-bottom: var(--spacing-xs);
    color: #5856d6;
    font-weight: var(--font-weight-semibold);
}

.fc-msg--pending .fc-bubble {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.fc-dots { display: inline-flex; gap: 4px; }

.fc-dots span {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--apple-gray-dark);
    animation: fcBlink 1.2s infinite ease-in-out;
}

.fc-dots span:nth-child(2) { animation-delay: .2s; }
.fc-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes fcBlink {
    0%, 80%, 100% { opacity: .3; }
    40% { opacity: 1; }
}

.fc-pending-label {
    font-size: var(--font-size-sm);
    color: var(--apple-text-secondary);
}

.fc-cancel {
    border: none;
    background: transparent;
    color: var(--apple-blue);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 0 var(--spacing-xs);
}

/* ------------------------------------------------------------------ */
/* Bulle système : une erreur ne se fait jamais passer pour l'assistant  */
/* ------------------------------------------------------------------ */

.fc-system {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--apple-error);
    border-radius: var(--radius-sm);
    background: var(--apple-error-bg);
    font-size: var(--font-size-sm);
}

.fc-system-head {
    font-weight: var(--font-weight-semibold);
    color: var(--apple-error);
    margin-bottom: 4px;
}

.fc-system-body { margin: 0 0 var(--spacing-xs); color: var(--apple-text-primary); }

/* Un simple renseignement : même forme, sans l'alarme. */
.fc-system--info {
    border-left-color: var(--apple-gray-medium);
    background: var(--apple-gray-bg);
}

.fc-system--info .fc-system-head { color: var(--apple-text-secondary); }

/* ------------------------------------------------------------------ */
/* Reçu d'action                                                        */
/* ------------------------------------------------------------------ */

.fc-receipt {
    margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-md) 40px;
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    background: var(--apple-white);
    box-shadow: var(--shadow-xs);
    font-size: var(--font-size-sm);
    overflow: hidden;
}

.fc-receipt-head {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--apple-success-bg);
    color: var(--apple-success);
    font-weight: var(--font-weight-semibold);
}

.fc-group { border-top: 1px solid var(--apple-gray-medium); }

.fc-group > summary {
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    list-style: none;
    border-left: 3px solid transparent;
    color: var(--apple-text-secondary);
}

.fc-group > summary::-webkit-details-marker { display: none; }

.fc-group--frise  > summary { border-left-color: var(--apple-blue); }
.fc-group--create > summary { border-left-color: var(--apple-success); }
.fc-group--update > summary { border-left-color: var(--apple-warning); }
.fc-group--detach > summary { border-left-color: var(--apple-info); }
.fc-group--delete > summary { border-left-color: var(--apple-error); }
.fc-group--image  > summary { border-left-color: var(--apple-info); }
.fc-group--error  > summary { border-left-color: var(--apple-gray-dark); }

.fc-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: 4px var(--spacing-sm) 4px var(--spacing-lg);
    color: var(--apple-text-primary);
}

.fc-group--delete .fc-item-title {
    text-decoration: line-through;
    opacity: .75;
}

.fc-item-action {
    border: none;
    background: transparent;
    color: var(--apple-blue);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: underline;
}

.fc-change {
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    color: var(--apple-text-secondary);
    padding-left: var(--spacing-xs);
}

.fc-change-field { font-weight: var(--font-weight-medium); }
.fc-change-from { text-decoration: line-through; color: var(--apple-text-tertiary); }
.fc-change-to { color: var(--apple-text-primary); }

/* ------------------------------------------------------------------ */
/* Composeur                                                            */
/* ------------------------------------------------------------------ */

.fc-scroll-pill {
    align-self: center;
    margin-top: calc(-1 * var(--spacing-lg));
    border: none;
    border-radius: var(--radius-full);
    background: var(--apple-gray-darker);
    color: var(--apple-white);
    font-size: var(--font-size-xs);
    padding: 6px var(--spacing-sm);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.fc-composer {
    /* La hauteur naturelle du champ : 24 px de ligne (16 px × 1,5), 24 px de marge
       intérieure, 2 px de bordure. Les boutons s'y alignent, plutôt que l'inverse —
       forcer le champ à 46 px ne lui laissait que 20 px pour une ligne de 24, d'où un
       ascenseur dans une zone d'une seule ligne. */
    --fc-composer-hauteur: 50px;

    display: flex;
    gap: var(--spacing-xs);
    /* En bas plutôt qu'étiré : le bouton garde sa taille quand le champ grandit. */
    align-items: flex-end;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--apple-gray-medium);
}

.fc-input {
    flex: 1 1 auto;
    resize: none;
    /* La constante vaut la hauteur naturelle du champ : on ne l'écrase donc pas, on
       s'assure seulement qu'il ne descend pas en dessous. La hauteur exacte est posée
       par autoGrow au fil de la frappe. */
    box-sizing: border-box;
    min-height: var(--fc-composer-hauteur);
    max-height: 160px;
    /* 16px minimum : en dessous, Safari iOS zoome au focus. */
    font-size: var(--font-size-base);
}

/* Carré : une icône seule n'a pas besoin de marges latérales, et la largeur
   égale à la hauteur donne un bouton net en regard du champ. */
.fc-send {
    flex: 0 0 auto;
    width: var(--fc-composer-hauteur);
    height: var(--fc-composer-hauteur);
    padding: 0;
}

/* Vide la plupart du temps : il ne réserve alors aucune ligne sous le champ. */
.fc-composer-help:has(.fc-counter:empty) {
    display: none;
}

.fc-composer-help {
    display: flex;
    justify-content: flex-end;
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-xs);
    color: var(--apple-text-tertiary);
}

/* Bande d'images montrée dans le fil, en réponse à « fais-moi voir ». */
/* Une ligne d'attente pendant un outil qui va chercher au dehors, sous la réponse
   déjà commencée : les mêmes points que la bulle d'attente. */
.fc-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-md) 40px;
}

/* Les sources d'une recherche sur internet : la boîte du relevé, mais neutre — chercher
   n'est pas écrire, elle n'a pas le vert d'une frise mise à jour. */
.fc-sources {
    margin: 0 0 var(--spacing-md) 40px;
    border: 1px solid var(--apple-gray-medium);
    border-left: 3px solid var(--apple-blue);
    border-radius: var(--radius-md);
    background: var(--apple-white);
    font-size: var(--font-size-sm);
}

.fc-sources > summary {
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--apple-text-secondary);
}

.fc-sources-liste {
    margin: 0;
    padding: 0 var(--spacing-sm) var(--spacing-xs) calc(var(--spacing-sm) + 1.2rem);
}

.fc-sources-liste .fc-link {
    overflow-wrap: anywhere;
}

.fc-sources-domaine {
    color: var(--apple-text-secondary);
}

.fc-galerie {
    margin: 0 0 var(--spacing-md) 40px;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    background: var(--apple-white);
}

.fc-galerie-titre {
    margin-bottom: 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--apple-text-secondary);
}

.fc-galerie-bande {
    display: flex;
    gap: var(--spacing-xs);
    overflow-x: auto;
    padding-bottom: 2px;
}

.fc-galerie-vignette {
    flex: 0 0 auto;
    display: block;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: none;
    cursor: zoom-in;
    line-height: 0;
}

.fc-galerie-vignette img {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

/* ------------------------------------------------------------------ */
/* Dépôt d'images                                                       */
/* ------------------------------------------------------------------ */

/* Discret : c'est un geste d'appoint, pas l'action principale du composeur. */
.fc-attach {
    flex: 0 0 auto;
    width: var(--fc-composer-hauteur);
    height: var(--fc-composer-hauteur);
    padding: 0;
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    background: var(--apple-white);
    color: var(--apple-text-secondary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.fc-attach:hover:not(:disabled) {
    background: var(--apple-gray-bg);
    color: var(--apple-text-primary);
}

.fc-attach:disabled {
    opacity: .5;
    cursor: default;
}

/* Le panneau est déjà en overflow: hidden ; le voile s'y superpose sans déborder. */

.fc-dropzone {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    /* Sans cela, le survol du voile déclencherait un dragleave sur la colonne et le
       voile se retirerait sous le curseur. */
    pointer-events: none;
    background: color-mix(in srgb, var(--apple-white) 88%, transparent);
    border: 2px dashed var(--apple-blue);
    border-radius: var(--radius-md);
    color: var(--apple-blue);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.fc-dropzone i { font-size: 28px; }
.fc-dropzone small { font-weight: normal; color: var(--apple-text-secondary); }

/* Alignée à droite, comme les messages de l'utilisateur : c'est lui qui dépose. */
.fc-depot {
    margin: 0 0 var(--spacing-sm) auto;
    max-width: 220px;
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--apple-white);
}

/* Un clic sur une image déposée l'ouvre en grand. */
.fc-depot-agrandir {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.fc-depot img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
}

.fc-depot figcaption {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--apple-text-secondary);
}

/* Le numéro est ce par quoi l'utilisateur désigne l'image en conversation :
   il doit se lire d'un coup d'œil. */
.fc-depot-num {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-sm);
    background: var(--apple-blue);
    color: var(--apple-white);
    font-weight: var(--font-weight-semibold);
    line-height: 20px;
    text-align: center;
}

.fc-depot-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un document déposé : pas de vignette, une étiquette de fichier. Il se lit comme
   un support de travail, pas comme une image à poser sur la frise. */
.fc-depot--document {
    max-width: 280px;
}

/* 4 vignettes de 60 px par ligne, avec leurs écarts. */
.fc-depot--document:has(.fc-depot-extraits) {
    max-width: 280px;
    min-width: 272px;
}

.fc-depot-fichier {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm) 0;
}

.fc-depot-fichier i {
    flex: 0 0 auto;
    font-size: 26px;
    color: var(--apple-text-secondary);
}

.fc-depot-fichier .fa-file-pdf { color: #d93025; }
.fc-depot-fichier .fa-file-word { color: #2b579a; }

.fc-depot-meta {
    font-size: var(--font-size-xs);
    color: var(--apple-text-secondary);
}

/* Les images extraites d'un document : une bande de vignettes sous son étiquette.
   Leur numéro est celui des images déposées, en bleu comme elles : elles s'emploient
   de la même façon. */
.fc-depot-extraits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 var(--spacing-xs) var(--spacing-xs);
}

.fc-depot-extrait {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: zoom-in;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--apple-gray-bg);
}

.fc-depot-extrait img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.fc-depot-agrandir:focus-visible,
.fc-depot-extrait:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
}

.fc-depot-extrait .fc-depot-num {
    position: absolute;
    top: 2px;
    left: 2px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
}

.fc-depot-page {
    position: absolute;
    right: 2px;
    bottom: 2px;
    padding: 0 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 10px;
}

/* Couleur distincte de celle des images : « le document 1 » et « l'image 1 » ne sont
   pas le même fichier. */
.fc-depot-num--document {
    background: var(--apple-text-secondary);
}

.fc-depot-attente {
    margin: 0 0 var(--spacing-sm) auto;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--apple-gray-bg);
    color: var(--apple-text-secondary);
    font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------------ */
/* Relevé des actions                                                   */
/* ------------------------------------------------------------------ */

.fc-group > summary {
    /* L'anneau de focus reste pour le clavier, mais un clic à la souris ne doit pas
       laisser un cadre bleu autour du titre de section. */
    outline: none;
}

.fc-group > summary:focus-visible {
    outline: 2px solid var(--apple-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Pastille de date : mêmes dégradés que la liste des événements. */
.fc-date {
    display: inline-block;
    padding: 3px var(--spacing-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--apple-white);
    white-space: nowrap;
    background: linear-gradient(135deg, var(--apple-blue), var(--apple-blue-dark));
}

.fc-date--bc { background: linear-gradient(135deg, #ff6b6b, #ee5a24); }

@media (prefers-reduced-motion: reduce) {
    .fc-bubble--typing p:last-child::after,
    .fc-dots span { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Mobile : l'en-tête tient sur une ligne                                */
/* ------------------------------------------------------------------ */

/* Portée à la seule page du chat : admin-apple.css empile titre et actions sur toutes
   les pages d'administration, et les y laisser est le bon choix. Ici le titre est long
   et l'action unique — les mettre côte à côte rend une ligne entière au fil.

   956 px et non 768 : les téléphones larges dépassent le point de rupture habituel, et
   le titre y occupe déjà toute la largeur. Au-delà de 768 px l'en-tête est de toute
   façon sur une ligne — seule la réduction du bouton y agit encore. */
@media (max-width: 956px) {
    .frise-chat-page .apple-header-main {
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .frise-chat-page .apple-header-actions {
        width: auto;
        flex-direction: row;
    }

    /* Le sous-titre explique ce que fait la page ; la page le montre déjà. */
    .frise-chat-page .apple-header .subtitle {
        display: none;
    }

    .frise-chat-page .apple-header-actions > * {
        width: auto;
    }

    /* Le libellé s'efface, l'icône suffit : le titre de la page dit déjà de quoi il
       s'agit. L'intitulé reste porté par aria-label et title. */
    .frise-chat-page .fc-btn-texte {
        display: none;
    }

    .frise-chat-page .fc-btn-nouvelle,
    .frise-chat-page .fc-btn-historique {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* ------------------------------------------------------------------ */
/* Mobile : la frise reste sous la conversation                         */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    /* Ni cadre, ni arrondi, ni ombre : la conversation et la frise prennent toute la
       largeur de l'écran, seulement séparées par leurs filets. */
    .fc-grid.apple-card {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .fc-col {
        padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
    }

    .fc-chat-tete {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    /* Les icônes suffisent : le libellé reste porté par l'attribut title. period-slider.css
       étire le bouton du jeu sur toute la largeur à cette taille : pas ici. */
    .fc-chat-actions .fc-btn-texte {
        display: none;
    }

    .fc-chat-actions .sort-toggle {
        flex-basis: auto;
        padding: 5px 9px;
    }

    .fc-receipt { margin-left: 0; }
    .fc-bubble { max-width: 100%; }
}

/* Liens produits par l'assistant : adresses de frise, de partage ou de jeu.
   Ils cassent volontairement n'importe où, une URL longue ne devant pas
   élargir la bulle au-delà de la colonne. */
.fc-bubble .fc-link {
    color: var(--apple-blue);
    text-decoration: underline;
    overflow-wrap: anywhere;
}

.fc-bubble .fc-link:hover {
    color: var(--apple-blue-dark);
}

/* Un bloc de code : le code d'intégration d'une frise, à recopier tel quel. Il
   défile en largeur plutôt que d'élargir la bulle. */
.fc-bubble .fc-code {
    position: relative;
    margin: 0.5rem 0;
    padding: 2.1rem 0.75rem 0.75rem;
    border-radius: 10px;
    background: #f3f4f8;
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fc-bubble .fc-code-copier {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: #fff;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Les boutons de l'en-tête sont ceux de /frise (.sort-toggle et ses variantes) :
   seuls leur place et leur taille se règlent ici. */
.fc-chat-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--spacing-xs);
}

.fc-chat-actions .sort-toggle {
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 12px;
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Mobile : aller droit au champ de saisie                              */
/*                                                                      */
/* Sur un téléphone, l'en-tête de page (retour, titre, sous-titre,      */
/* actions, séparateur) occupait presque tout l'écran : il fallait      */
/* défiler pour découvrir la conversation. Sur cette page seulement,    */
/* il est réduit à l'essentiel afin que la discussion et son champ      */
/* soient visibles dès l'ouverture.                                     */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .frise-chat-page .apple-container {
        padding: var(--spacing-sm) var(--spacing-sm) 0;
    }

    /* Le pied de page n'a rien à faire sous un outil qui occupe tout l'écran : on ne
       le découvrirait qu'en faisant défiler la page, ce que la conversation et la
       frise ne demandent jamais. */
    .frise-chat-page .footer-fixed {
        display: none;
    }

    /* La page elle-même ne défile pas : la conversation et la frise ont chacune leur
       défilement. Sans cela, Safari sur iPhone montrait un ascenseur en permanence —
       le corps de page porte un min-height de 100vh (global.css), et 100vh y vaut la
       hauteur de l'écran barres masquées, plus que ce qu'on voit quand elles sont là.
       La hauteur visible, c'est 100dvh. */
    html:has(> body.frise-chat-page),
    body.frise-chat-page {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* En discussion, le titre de la page et ses boutons s'effacent : la flèche de
       retour, en tête du cadre, les remplace. */
    .fc-en-discussion .apple-header {
        display: none;
    }

    .fc-en-discussion .fc-chat-tete,
    .fc-en-discussion .fc-retour {
        display: flex;
    }

    /* Ni filet ni marge : le cadre de la conversation suit le titre de près. */
    .frise-chat-page .apple-header {
        margin-bottom: var(--spacing-xs);
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* Une seule ligne : le titre se réduit, puis s'élide plutôt que de passer à la
       ligne et de repousser la conversation. */
    .frise-chat-page .apple-header h1 {
        font-size: var(--font-size-lg);
        margin-bottom: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .frise-chat-page .apple-header-main > :first-child {
        min-width: 0;
    }

    /* Les actions passent sur une ligne, sans occuper toute la largeur. */
    .frise-chat-page .apple-header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-top: var(--spacing-xs);
    }

    .frise-chat-page .apple-header-actions .apple-btn {
        flex: 0 1 auto;
        padding: 7px 12px;
        font-size: var(--font-size-xs);
    }

    .frise-chat-page .apple-header-back {
        margin-bottom: 0;
    }

    .fc-page {
        gap: var(--spacing-xs);
    }

}

/* ------------------------------------------------------------------ */
/* Le nom de la frise en cours, au-dessus d'elle                        */
/* ------------------------------------------------------------------ */

/* En tête du cadre : la frise en cours et ce qu'on peut en faire. */
.fc-chat-tete {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    border-bottom: 1px solid var(--apple-gray-medium);
}

/* Sans frise, la ligne n'a rien à montrer ; sur un téléphone en discussion, elle
   reste pour sa seule flèche de retour. */
.fc-chat-tete--sans-frise {
    display: none;
}

.fc-chat-tete--sans-frise .fc-context-frise,
.fc-chat-tete--sans-frise .fc-chat-actions {
    display: none;
}

.fc-retour {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: -6px;
    border-radius: var(--radius-full);
    color: var(--apple-text-secondary);
    text-decoration: none;
}

.fc-retour:hover {
    background: var(--apple-gray-bg);
    color: var(--apple-blue);
}

/* Le titre absorbe la place et s'élide ; l'attribut title donne le nom entier. */
/* Sa couleur, son dégradé, viennent de .titre-de-frise (frise-public.css). */
.fc-context-frise {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-lg);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Capsules de démarrage : sur quelle frise travailler                  */
/* ------------------------------------------------------------------ */

.fc-starters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0 0 var(--spacing-md) 40px;
}

.fc-starter {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 100%;
    padding: 3px var(--spacing-sm) 3px 3px;
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    background: var(--apple-white);
    color: var(--apple-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.fc-starter:hover {
    border-color: var(--apple-blue);
    box-shadow: var(--shadow-sm);
}

.fc-starter-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--apple-gray-bg);
    color: var(--apple-text-secondary);
    font-size: 11px;
    flex: 0 0 auto;
}

/* Créer une frise est l'action d'entrée : elle porte la couleur d'accent. */
.fc-starter--nouvelle .fc-starter-icone {
    background: var(--apple-blue);
    color: var(--apple-white);
}

.fc-starter-nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 190px;
}

.fc-starter-compteur {
    font-size: var(--font-size-xs);
    color: var(--apple-text-tertiary);
    background: var(--apple-gray-bg);
    border-radius: var(--radius-full);
    padding: 2px 7px;
}

@media (max-width: 768px) {
    .fc-starters { margin-left: 0; }
    .fc-starter-nom { max-width: 140px; }
}

/* ------------------------------------------------------------------ */
/* Barre d'outils et recherche dans les conversations                   */
/* ------------------------------------------------------------------ */

.fc-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.fc-modal-fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

.fc-modal-boite {
    position: relative;
    width: min(640px, 100%);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    background: var(--apple-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.fc-modal-tete {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--apple-gray-medium);
    color: var(--apple-text-tertiary);
}

.fc-modal-champ {
    flex: 1 1 auto;
    border: none;
    outline: none;
    /* 16px : en dessous, Safari iOS zoome au focus. */
    font-size: var(--font-size-base);
    font-family: var(--font-family);
    color: var(--apple-text-primary);
    background: transparent;
}

/* Les navigateurs ajoutent leur propre croix aux champs de type search : elle
   ferait doublon avec la nôtre, juste à côté. */
.fc-modal-champ::-webkit-search-cancel-button,
.fc-modal-champ::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.fc-modal-fermer {
    border: none;
    background: transparent;
    color: var(--apple-text-tertiary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
}

.fc-modal-fermer:hover { color: var(--apple-text-primary); }

.fc-modal-corps {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--spacing-xs) 0 var(--spacing-sm);
}

.fc-modal-section {
    margin: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--apple-text-tertiary);
}

.fc-modal-vide {
    margin: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    color: var(--apple-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Le lien occupe toute la ligne, la corbeille se pose par-dessus : la zone de clic
   pour ouvrir la conversation reste entière. */
.fc-resultat-ligne {
    position: relative;
    display: flex;
    align-items: stretch;
}

.fc-resultat {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    padding-right: 44px;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
}

.fc-resultat:hover {
    background: var(--apple-gray-bg);
    border-left-color: var(--apple-blue);
}

/* Discrète au repos : la suppression ne doit pas être la première chose que l'œil
   trouve dans une liste faite pour rouvrir une conversation. */
.fc-resultat-supprimer {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--apple-text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}

.fc-resultat-ligne:hover .fc-resultat-supprimer,
.fc-resultat-supprimer:focus-visible {
    opacity: 1;
}

.fc-resultat-supprimer:hover {
    background: var(--apple-error-bg);
    color: var(--apple-error);
}

/* Sur un écran tactile il n'y a pas de survol : la corbeille reste visible. */
@media (hover: none) {
    .fc-resultat-supprimer { opacity: 1; }
}

.fc-resultat-confirme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--apple-error-bg);
}

.fc-resultat-confirme-texte {
    flex: 1 1 auto;
    font-size: var(--font-size-sm);
    color: var(--apple-text-primary);
}

.fc-resultat-erreur {
    flex: 1 1 100%;
    font-size: var(--font-size-xs);
    color: var(--apple-error);
}

.fc-resultat-annuler,
.fc-resultat-confirmer {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.fc-resultat-annuler {
    border: 1px solid var(--apple-gray-medium);
    background: var(--apple-white);
    color: var(--apple-text-secondary);
}

.fc-resultat-confirmer {
    border: 0;
    background: var(--apple-error);
    color: var(--apple-white);
    font-weight: var(--font-weight-semibold);
}

.fc-resultat-confirmer:disabled {
    opacity: .6;
    cursor: default;
}

.fc-resultat-tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--apple-text-primary);
}

.fc-resultat-date {
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    color: var(--apple-text-tertiary);
}

.fc-resultat-extrait {
    display: block;
    margin-top: 2px;
    font-size: var(--font-size-sm);
    color: var(--apple-text-secondary);
    line-height: 1.4;
}

/* Le terme cherché, mis en évidence dans son contexte. */
.fc-resultat-extrait mark {
    background: var(--apple-warning-bg);
    color: var(--apple-text-primary);
    border-radius: 3px;
    padding: 0 2px;
}

/* Sur un écran étroit, deux boutons carrés de 46 px mangeraient un tiers de la ligne
   de saisie : le trombone s'efface, l'envoi garde sa taille. */
@media (max-width: 768px) {
    .fc-attach {
        width: 38px;
        border-color: transparent;
    }

    .fc-depot { max-width: 60%; }
}

@media (max-width: 768px) {
    .fc-modal { padding: 0; }
    .fc-modal-boite {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }
}

/* Repère de fin de liste : sert au chargement des conversations plus anciennes. */
.fc-modal-sentinelle {
    height: 1px;
}