/* chat-question.css — La question posée avec des réponses à cliquer
 *
 * L'outil `demander` rend une question et ses options ; cette feuille les
 * dessine dans le fil de conversation.
 *
 * Le parti pris : la carte se distingue d'une bulle sans crier. Elle est plus
 * large, plus tenue, avec un liseré à gauche — elle DEMANDE quelque chose, et
 * l'œil doit s'y arrêter au lieu de la lire en continu comme du texte. Mais
 * elle reste dans le fil, pas dans une fenêtre par-dessus : une modale
 * interromprait la conversation au lieu de la faire avancer.
 */

/* ══════════ Le socle : au-dessus de la barre, pas dans le fil ══════════
   Dans le fil, la question remontait avec les messages suivants et sortait de
   l'ecran — on demandait une reponse a quelqu'un qui ne voyait plus la
   question. Ici, elle reste sous les yeux au moment ou l'on s'apprete a
   repondre.

   Le socle occupe zero pixel tant qu'il est vide : `grid-template-rows: 0fr`
   vers `1fr` est la seule facon d'animer une hauteur qu'on ne connait pas
   d'avance, sans la mesurer en JavaScript a chaque rendu. */
.ch-question-socle {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 1rem;
}

.ch-question-socle:has(.ch-question.est-la) { grid-template-rows: 1fr; }

/* `min-height: 0` : sans lui, la piste de grille refuse de descendre sous la
   hauteur du contenu et rien ne s'anime. */
.ch-question-socle > * { min-height: 0; overflow: hidden; }

.ch-question {
    margin: 0 0 0.7rem;
    padding: 1rem 1.05rem 0.9rem;
    background: var(--mr-surface-card);
    border: 1px solid var(--mr-border);
    /* Le lisere : le seul signal fort. Il dit « ici on attend une reponse »
       sans ajouter ni couleur ni icone. */
    border-left: 2px solid var(--mr-text-strong);
    border-radius: 4px 12px 12px 4px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.ch-question.est-la { opacity: 1; transform: none; }

/* Repondue : elle s'efface avant d'etre retiree du DOM (260 ms cote JS). */
.ch-question.est-repondu { opacity: 0; transform: translateY(-6px); }

/* Le navigateur qui ne connait pas `:has` n'animerait pas la hauteur et
   laisserait la carte coupee. On lui rend une piste libre : pas d'animation,
   mais une carte entiere et lisible. */
@supports not selector(:has(*)) {
    .ch-question-socle { grid-template-rows: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ch-question-socle, .ch-question { transition: none; }
    .ch-question { opacity: 1; transform: none; }
}

.ch-question-titre {
    margin: 0 0 0.8rem;
    font-family: var(--mr-serif);
    font-size: var(--ch-fs-lg);
    font-weight: 500;
    line-height: 1.3;
    color: var(--mr-text-strong);
}

/* ── Les réponses proposées ─────────────────────────────────────────────── */

.ch-question-choix {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Pleine largeur et empilées : le rail de conversation fait 440 px par défaut
   et se rétrécit à la souris. Des options en grille y passeraient sur deux
   lignes au premier libellé un peu long. */
.ch-choix {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    width: 100%;
    padding: 0.62rem 0.85rem;
    font: inherit;
    text-align: left;
    color: var(--mr-text);
    background: var(--mr-surface-sunken);
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ch-choix:hover {
    border-color: var(--mr-border-strong);
    background: var(--mr-surface-hover);
    transform: translateX(2px);
}

.ch-choix:focus-visible {
    outline: 2px solid var(--mr-text-strong);
    outline-offset: 2px;
}

.ch-choix-label {
    font-size: var(--ch-fs-sm);
    font-weight: 500;
    color: var(--mr-text-strong);
    line-height: 1.35;
}

/* Le détail : ce qui permet de trancher entre deux options voisines. Plus
   petit, plus pâle — il se lit seulement quand on hésite. */
.ch-choix-detail {
    font-size: var(--ch-fs-2xs);
    line-height: 1.4;
    color: var(--mr-text-muted);
}

/* Choix multiple : la case cochée s'inverse. Pas de case à cocher dessinée —
   le remplissage dit la même chose et ne vole pas de largeur au libellé. */
.ch-choix.est-choisi,
.ch-choix.est-choisi:hover {
    background: var(--mr-btn-bg);
    border-color: var(--mr-btn-bg);
    transform: none;
}
.ch-choix.est-choisi .ch-choix-label { color: var(--mr-btn-text); }
.ch-choix.est-choisi .ch-choix-detail { color: var(--mr-btn-text); opacity: 0.72; }

/* ── Écrire sa propre réponse ───────────────────────────────────────────── */

/* Toujours proposé par défaut : une liste de six cases qui ne contient pas la
   vraie réponse enferme au lieu d'aider. */
.ch-question-libre {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.55rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--mr-border);
}

.ch-libre-champ {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-size: var(--ch-fs-sm);
    color: var(--mr-text);
    background: transparent;
    border: 1px solid var(--mr-border);
    border-radius: 999px;
    outline: none;
    transition: border-color 0.15s ease;
}
.ch-libre-champ:focus { border-color: var(--mr-border-strong); }
.ch-libre-champ::placeholder { color: var(--mr-text-muted); }

.ch-libre-ok {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--mr-btn-bg);
    color: var(--mr-btn-text);
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.ch-libre-ok:hover { opacity: 0.85; }

/* ── Valider (choix multiple seulement) ─────────────────────────────────── */

.ch-question-valider {
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.62rem;
    font: inherit;
    font-size: var(--ch-fs-sm);
    font-weight: 600;
    color: var(--mr-btn-text);
    background: var(--mr-btn-bg);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.ch-question-valider:hover:not(:disabled) { opacity: 0.88; }

/* Désactivé tant que rien n'est coché : un bouton cliquable qui n'envoie rien
   se lit comme une panne. */
.ch-question-valider:disabled { opacity: 0.35; cursor: default; }

/* ── Une fois répondu ───────────────────────────────────────────────────── */

/* La carte se fige au lieu de disparaître : la réponse part comme un message
   juste en dessous, et voir la question à laquelle on a répondu est ce qui
   rend la conversation relisible trois jours plus tard. */
.ch-question.est-repondu {
    border-left-color: var(--mr-border);
    /* 0,8 ET NON 0,62. Le voile porte sur toute la carte, donc sur son texte :
       a 0,62 le second niveau tombait a 3,20:1 en theme clair, sous les 4,5
       d'AA. A 0,8 il remonte a 4,95 en clair et 5,80 en sombre, et la carte se
       lit toujours comme rangee — c'est le filet de gauche qui porte l'essentiel
       de ce signal, pas le voile. Une question a laquelle on a repondu doit
       rester RELISIBLE : c'est toute la raison de la garder a l'ecran. */
    opacity: 0.8;
}

.ch-question.est-repondu .ch-choix,
.ch-question.est-repondu .ch-libre-champ,
.ch-question.est-repondu .ch-libre-ok,
.ch-question.est-repondu .ch-question-valider {
    cursor: default;
    pointer-events: none;
}

.ch-question.est-repondu .ch-choix:hover { transform: none; }

/* Le fil rétréci à la souris : on resserre plutôt que de laisser déborder. */
@media (max-width: 420px) {
    .ch-question { padding: 0.85rem 0.9rem 0.8rem; }
    .ch-question-titre { font-size: var(--ch-fs-md); }
}

/* ══════════ La carte PREND la place de la barre ══════════
   Elle se posait au-dessus, et la barre restait visible en dessous : deux
   champs de saisie l'un sur l'autre, sans rien pour dire lequel repond a la
   question. Or la carte a deja le sien, avec son bouton d'envoi.

   On la masque en la retirant du flux APRES l'avoir effacee : `visibility`
   seul laisserait sa hauteur, et la carte remonterait de soixante pixels au
   moment ou elle apparait. */
.ch.a-question .ch-rail-bas {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transition: opacity 0.18s ease, transform 0.22s ease,
                max-height 0.26s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

/* La barre au repos garde la meme transition, sinon son RETOUR serait sec
   alors que son depart glissait. */
.ch-rail-bas {
    max-height: 40vh;
    transition: opacity 0.2s ease, transform 0.24s ease,
                max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .ch-rail-bas, .ch.a-question .ch-rail-bas { transition: none; }
}