/*
 * 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.
 */

.fc-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* ------------------------------------------------------------------ */
/* Bandeau de contexte                                                  */
/* ------------------------------------------------------------------ */
.fc-context-frise {
    font-size: var(--font-size-base);
    color: var(--apple-text-primary);
}

/* Sans frise rattachée : une phrase, aucun bouton — tout se dit en conversation. */










/* ------------------------------------------------------------------ */
/* Grille : conversation large, aperçu plus étroit                      */
/* ------------------------------------------------------------------ */

.fc-grid {
    display: grid;
    /* 58/42 : à 50/50 les bulles dépassent 90 caractères par ligne. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--spacing-md);
    /* clamp() évite que la zone devienne inutilisable sur un écran court. */
    height: clamp(480px, calc(100vh - 340px), 900px);
}

.fc-col {
    display: flex;
    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-md);
    overflow: hidden;
}

.fc-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Empêche le défilement de « fuir » vers la page une fois arrivé en haut du fil. */
    overscroll-behavior: contain;
}

.fc-tabs { display: none; }

/* ------------------------------------------------------------------ */
/* 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. */
.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;
}

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

/* Titre coloré par ses thèmes. Le dégradé arrive par --fc-degrade, calculé à partir
   des couleurs de l'utilisateur ; tout le reste est ici. --fc-teinte sert de repli aux
   moteurs qui ignorent le découpage du fond sur le texte. */
.fc-row-title--themes {
    background: var(--fc-degrade);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fc-teinte);
}

/* Un lien, pas un bouton : l'action est secondaire et ne doit pas peser dans une
   liste où chaque ligne en porte déjà une. */
.fc-row-desc-lien {
    display: inline-block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--apple-text-tertiary);
    font-size: var(--font-size-xs);
    text-decoration: underline;
    cursor: pointer;
}

.fc-row-desc-lien:hover { color: var(--apple-blue); }

.fc-row-desc {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--apple-text-secondary);
}

/* Bande de vignettes d'un événement dans l'aperçu. */
.fc-row-vignettes {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
}

/* Le temps du chargement, la place est déjà prise : sans cela, l'arrivée des images
   ferait sauter le titre de la ligne sous le curseur. */
.fc-row-vignettes.is-chargement::after {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--apple-gray-bg);
    animation: fcBlink 1.2s infinite ease-in-out;
}

/* Petite et de taille fixe : la ligne doit garder la même hauteur qu'un événement
   sans image, sinon la liste ondule. */
.fc-row-vignette {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--apple-gray-bg);
    cursor: zoom-in;
    line-height: 0;
}

.fc-row-vignette img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bande d'images montrée dans le fil, en réponse à « fais-moi voir ». */
.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-col[data-panel="chat"] { position: relative; }

.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; }

/* 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);
}

.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;
}

.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);
}

/* ------------------------------------------------------------------ */
/* Aperçu de la frise                                                   */
/* ------------------------------------------------------------------ */

/* Compteurs : le chiffre porte l'information, le libellé l'explique. Des pastilles
   grises de même poids rendaient les trois valeurs indifférenciées et ternes. */
.fc-preview-head {
    display: flex;
    align-items: stretch;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--apple-gray-medium);
    margin-bottom: var(--spacing-sm);
}

/* Chaque compteur est l'onglet de sa liste : la bordure basse dit lequel est ouvert,
   sans ajouter une rangée de boutons au-dessus d'une colonne déjà chargée. */
.fc-stat {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-xs) 4px;
    min-width: 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--transition-normal), background var(--transition-normal);
}

.fc-stat:hover { background: var(--apple-gray-bg); }

.fc-stat.is-active { border-bottom-color: var(--apple-blue); }

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

/* Un onglet vide reste cliquable — il dit simplement qu'il n'y a rien — mais ne
   réclame pas l'attention. */
.fc-stat.is-zero:not(.is-active) .fc-stat-value { color: var(--apple-text-tertiary); }

/* Filets fins plutôt que des fonds : trois blocs, une seule respiration. */
.fc-stat + .fc-stat {
    border-left: 1px solid var(--apple-gray-medium);
}

.fc-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    color: var(--apple-blue);
    font-variant-numeric: tabular-nums;
    transition: color var(--transition-normal);
}

.fc-stat-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--apple-text-tertiary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Un compteur à zéro ne doit pas attirer l'œil autant qu'un compteur qui compte. */
.fc-stat.is-zero .fc-stat-value {
    color: var(--apple-gray-medium);
}

@keyframes fcBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.fc-stat--bumped .fc-stat-value {
    animation: fcBump 420ms cubic-bezier(.34, 1.56, .64, 1);
}

.fc-preview-empty {
    color: var(--apple-text-tertiary);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.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);
}

/* Fond et arrondi repris de .timeline-content sur /frise, pour l'unité graphique.
   Un filet gris tient lieu de contour plutôt qu'une ombre portée : empilées par
   dizaines dans une colonne étroite, les ombres se chevauchaient et brouillaient la
   séparation entre deux lignes. */
.fc-row {
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border: 1px solid var(--apple-gray-medium);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #fefefe 100%);
    transition: border-color .3s cubic-bezier(0, 0, .5, 1);
}

.fc-row:hover {
    border-color: var(--apple-gray-dark);
}

.fc-row-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.fc-row-title {
    flex: 1 1 auto;
    /* Sans cela, deux ou trois vignettes repoussaient le titre — et les icônes
       d'action avec lui — sur une seconde ligne. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Même graisse et même corps que h3.timeline-event-title sur /frise : le dégradé
       de thèmes appliqué à du texte fin devient illisible. */
    font-size: 1rem;
    font-weight: 600;
    color: var(--apple-text-primary);
}

.fc-row-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.fc-row-action {
    border: none;
    background: transparent;
    color: var(--apple-text-tertiary);
    cursor: pointer;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    text-decoration: none;
    transition: var(--transition-fast);
}

.fc-row-action:hover { color: var(--apple-blue); }

/* La période reprend le bloc de /frise. Ne restent ici que les écarts propres à une
   colonne : l'espacement vertical d'une liste, et non celui d'une frise. */
.fc-row--periode {
    margin: 0 0 var(--spacing-xs);
    padding: 12px;
    z-index: auto;
}

.fc-row--periode .periode-title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fc-row--periode .periode-title i { font-size: .85em; }

.fc-row--periode .fc-row-actions { margin-left: auto; }

/* Un simple bloc, comme le .mt-2 de /frise. Les étiquettes elles-mêmes sont réglées
   par « .timeline-content .badge » dans timeline.css, que ces conteneurs rejoignent :
   tailles absolues, donc plus rien à compenser ici. */
.fc-row-themes,
.fc-theme-chips {
    margin-top: .5rem;
}

/* Tout vient de .badge (Bootstrap) et du style en ligne posé par le contrôleur, comme
   sur /frise. Repli pour un thème sans couleur, sinon Bootstrap l'écrirait en blanc. */
.fc-theme-chips .badge:not([style]),
.fc-row-themes .badge:not([style]) {
    color: var(--apple-text-secondary);
    border: 1px solid var(--apple-gray-medium);
    background-color: var(--apple-white);
}

/* 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); }

/* ------------------------------------------------------------------ */
/* Surlignage : c'est ce qui donne à voir la frise en train de se faire  */
/* ------------------------------------------------------------------ */

@keyframes fcFlashNew {
    from { background: var(--apple-success-bg); transform: translateX(-6px); }
    to   { background: var(--apple-gray-light); transform: none; }
}

@keyframes fcFlashUpdated {
    from { background: var(--apple-warning-bg); transform: translateX(-6px); }
    to   { background: var(--apple-gray-light); transform: none; }
}

/* Une ligne qui arrive : d'abord aucune place, puis la hauteur qu'il lui faut, les
   suivantes descendant d'elles-mêmes. La hauteur cible est posée en ligne par le
   contrôleur — « auto » ne s'anime pas. */
.fc-entrant {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height .4s cubic-bezier(0, 0, .2, 1),
        opacity .4s ease .1s,
        margin .4s ease,
        padding .4s ease;
}

.fc-entrant--ouvert {
    margin-bottom: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    border-width: 1px;
    opacity: 1;
}

.fc-highlight-new { animation: fcFlashNew 1.4s ease-out; }
.fc-highlight-updated { animation: fcFlashUpdated 1.4s ease-out; }

.fc-removing {
    background: var(--apple-error-bg);
    transition: opacity .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease;
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .fc-highlight-new,
    .fc-highlight-updated,
    .fc-entrant,
    .fc-removing,
    .fc-stat--bumped .fc-stat-value,
    .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;
    }

    .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 {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* ------------------------------------------------------------------ */
/* Mobile : onglets plutôt qu'empilement                                */
/* ------------------------------------------------------------------ */

@media (max-width: 768px) {
    .fc-grid {
        grid-template-columns: minmax(0, 1fr);
        /* 100dvh et non 100vh : la barre d'adresse iOS fausse vh. */
        height: calc(100dvh - 260px);
        min-height: 420px;
    }

    /* Empiler obligerait à défiler par-dessus toute la frise pour écrire. */
    .fc-col { display: none; }
    .fc-col.is-active { display: flex; }

    .fc-tabs {
        display: flex;
        gap: 4px;
        background: var(--apple-gray-bg);
        border-radius: var(--radius-md);
        padding: 4px;
    }

    .fc-tab {
        flex: 1 1 0;
        border: none;
        background: transparent;
        border-radius: var(--radius-sm);
        padding: var(--spacing-xs);
        font-size: var(--font-size-sm);
        color: var(--apple-text-secondary);
        cursor: pointer;
    }

    .fc-tab.is-active {
        background: var(--apple-white);
        color: var(--apple-text-primary);
        box-shadow: var(--shadow-xs);
    }

    .fc-tab-badge {
        display: inline-block;
        min-width: 20px;
        border-radius: var(--radius-full);
        background: var(--apple-gray-medium);
        font-size: var(--font-size-xs);
        padding: 0 6px;
    }

    /* Seul retour visible quand la frise change alors qu'on est sur l'onglet chat. */
    .fc-tab-badge.is-pulsing {
        animation: fcPulse 1s ease-in-out 3;
        background: var(--apple-success);
        color: var(--apple-white);
    }

    @keyframes fcPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.25); }
    }

    .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);
}

/* Raccourcis sous le composeur.
   Ils remplissent le champ sans envoyer. Chacun porte sa couleur dans une pastille :
   une simple bordure grise sur fond blanc les rendait indistincts et ternes. */
/* Alignés à droite, comme le bouton d'envoi qu'ils prolongent : à gauche, ils
   entraient en concurrence avec le fil de la conversation. */
.fc-quick-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.fc-quick-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px var(--spacing-sm) 6px 6px;
    border: 1px solid var(--apple-gray-medium);
    /* Coins francs plutôt qu'un rayon « pleine hauteur » : sur un élément aussi peu
       haut, ce dernier produit une ellipse écrasée et non une pilule. --radius-md est
       le rayon des cartes et des champs, les raccourcis s'y alignent. */
    border-radius: var(--radius-md);
    background: var(--apple-white);
    color: var(--apple-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
                border-color var(--transition-fast), background var(--transition-fast);
}

.fc-quick-action-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Carré parfait : ici le rayon plein donne bien un cercle. */
    width: 26px;
    height: 26px;
    border-radius: var(--radius-full);
    background: var(--fc-action-teinte);
    color: var(--apple-white);
    font-size: 11px;
    flex: 0 0 auto;
}

.fc-quick-action:hover {
    border-color: var(--fc-action-teinte);
    background: var(--fc-action-fond);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.fc-quick-action:active {
    transform: none;
    box-shadow: none;
}

.fc-quick-action:focus-visible {
    outline: 2px solid var(--fc-action-teinte);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* Partager mène au lien public : c'est l'action principale, elle prend le bleu. */
.fc-quick-action--partager {
    --fc-action-teinte: var(--apple-blue);
    --fc-action-fond: var(--apple-info-bg);
}

/* Le bouton « Voir la frise » porte .sort-toggle, défini dans period-slider.css :
   rien à styler ici, sous peine d'écraser la référence. Seul reste le retrait du
   soulignement, l'élément étant une ancre et non un bouton. */
.fc-quick-action--voir {
    text-decoration: none;
    flex: 0 0 auto;
}

/* Le jeu est une respiration : une teinte chaude le distingue au premier coup d'œil. */
.fc-quick-action--jeu {
    --fc-action-teinte: var(--apple-warning);
    --fc-action-fond: var(--apple-warning-bg);
}

@media (prefers-reduced-motion: reduce) {
    .fc-quick-action { transition: none; }
    .fc-quick-action:hover { transform: none; }
}

/* ------------------------------------------------------------------ */
/* 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;
    }

    .frise-chat-page .apple-header {
        margin-bottom: var(--spacing-sm);
        padding-bottom: var(--spacing-xs);
    }

    /* 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 h1 {
        font-size: var(--font-size-xl);
        margin-bottom: 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);
    }

    /* Les onglets commandent ce qu'on regarde : ils viennent juste au-dessus du
       panneau, sous le bouton d'historique. La page étant une colonne flex, il
       suffit de remonter la barre d'outils. */
    .fc-toolbar {
        order: -1;
    }

    /* La grille récupère la place gagnée sur l'en-tête. */
    .fc-grid {
        height: calc(100dvh - 190px);
    }

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

/* ------------------------------------------------------------------ */
/* Colonne de droite : la frise en cours coiffe ses compteurs           */
/* ------------------------------------------------------------------ */

/* Une seule ligne : le libellé « Frise en construction » était redondant, on est
   déjà dans le panneau de la frise et ses compteurs suivent immédiatement. */
.fc-preview-frise {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs);
    padding-bottom: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--apple-gray-medium);
}

.fc-preview-icone {
    flex: 0 0 auto;
    color: var(--apple-text-tertiary);
    font-size: var(--font-size-sm);
}

/* Le titre absorbe la place et s'élide ; l'attribut title donne le nom entier. */
.fc-context-frise {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-lg);
    color: var(--apple-text-primary);
    line-height: 1.2;
    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: 6px var(--spacing-sm) 6px 6px;
    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-toolbar {
    display: flex;
    justify-content: flex-end;
}

.fc-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px var(--spacing-sm);
    border: 1px solid var(--apple-gray-medium);
    border-radius: var(--radius-md);
    background: var(--apple-white);
    color: var(--apple-text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.fc-toolbar-btn:hover {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
}

.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;
}