/*
 * Les rubriques de mise au point des réglages.
 *
 * Une feuille à part, et pas quelques règles ajoutées à `settings.css` : ces écrans n'existent
 * que là où le mode de mise au point est actif, et leur habillage n'a rien à faire dans la
 * feuille que tout le monde charge.
 *
 * Le design system n'habille pas `pre` : il lui donne une police à chasse fixe et rien d'autre.
 * Un prompt a pourtant besoin d'un cadre et d'un défilement, faute de quoi il pousse la page
 * entière en largeur.
 */

/* La liste des tours déborde la largeur de lecture : huit colonnes de chiffres ne sont pas un
   texte, et les serrer dans une colonne faite pour des phrases pousse la commande d'ouverture
   hors de l'écran. Les autres rubriques gardent leur largeur. */
.settings-page:has(.calls-wide) {
    max-width: none;
}

/* Le bloc où se lit un texte parti au modèle.
   Les blancs et les retours à la ligne sont conservés — ils comptent dans un prompt — mais les
   lignes se replient plutôt que de déborder : un message système fait couramment cent
   caractères de large, et une barre de défilement horizontale le rendrait illisible. */
.calls-block {
    max-height: 24rem;
    overflow: auto;
    padding: var(--app-space-sm);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-ui);
    background: var(--app-raised);
    color: var(--app-ink);
    font-family: var(--app-font-mono);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 4;
}

/* Un message, ou un outil appelé : ses étiquettes au-dessus, son texte en dessous. */
.calls-message {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    align-items: flex-start;
}

/* Ce qui est un identifiant et non un mot : un nom de modèle, un nom d'outil. */
.calls-model {
    font-family: var(--app-font-mono);
    font-size: var(--app-text-sm);
}

/* Le titre d'un appel porte le modèle à côté de son rang, en retrait : c'est le rang qui
   sépare deux appels, le modèle ne fait que le préciser. */
.app-card-title .calls-model {
    margin-left: var(--app-space-sm);
    font-weight: var(--app-weight-medium);
}

/* Un outil par ligne : son libellé, puis son nom technique poussé à droite. La description
   n'est pas là — elle attend en infobulle, d'où le curseur qui l'annonce. */
.calls-tools .app-list-item {
    display: flex;
    gap: var(--app-space-sm);
    align-items: baseline;
    cursor: help;
}

.calls-tools .app-list-title {
    flex: 1 1 auto;
}

/* Le total, puis le détail en dessous. Chaque décompte reste d'un seul tenant : coupé au
   milieu, il se lirait comme deux nombres sans rapport. */
.calls-tokens {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xs);
}

.calls-tokens .app-list-meta {
    text-wrap: balance;
}

/*
 * Le lien qui mène de la réponse à sa trace, sous la réponse elle-même.
 *
 * Deuxième colonne, comme les pièces jointes : le tour est une grille dont la première colonne
 * tient la pastille de l'assistant, et un élément qui n'en tiendrait pas compte irait se ranger
 * sous elle.
 *
 * Effacé au repos et lisible au survol : il est là pour qui le cherche, et il ne doit pas
 * disputer l'attention à ce que l'assistant a répondu.
 */
.chat-turn .chat-trace {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    margin-top: var(--app-space-2xs);
    padding: var(--app-space-2xs);
    border-radius: var(--app-radius-ui);
    color: var(--app-ink-muted);
    opacity: .55;
}

.chat-turn .chat-trace:hover,
.chat-turn .chat-trace:focus-visible {
    color: var(--app-ink);
    background: var(--app-hover);
    opacity: 1;
}

/*
 * Les deux tableaux des crans d'analyse.
 *
 * Les largeurs sont posées ici et ne se déduisent pas du contenu : un identifiant de modèle
 * s'allonge d'une génération à l'autre, une action porte un nom plus long que la précédente, et
 * une table qui se répartit toute seule redessine ses colonnes à chaque ajout. Deux pages
 * ouvertes côte à côte cesseraient alors de se comparer.
 *
 * `table-layout: fixed` fait tenir la promesse : sans lui, le navigateur élargit malgré tout la
 * colonne dont le contenu déborde, et les pourcentages ne sont qu'un souhait.
 */
.depth-table {
    table-layout: fixed;
}

.depth-table :is(th, td) {
    /* Un nom de modèle ne porte pas d'espace : sans cette césure, il pousse sa colonne au lieu
       de passer à la ligne, et emporte la mise en page avec lui. */
    overflow-wrap: anywhere;
}

.depth-table :is(th, td):first-child {
    width: 30%;
}

/*
 * La dernière colonne du détail porte un nombre : elle n'a pas besoin de plus que ses chiffres,
 * et ce qu'on lui retire va au modèle, qui en manque.
 */
.depth-table :is(th, td):last-child {
    width: 22%;
}

/*
 * La matrice des droits.
 *
 * Largeurs fixes, comme les tableaux des crans : une identité de droit s'allonge d'un contexte à
 * l'autre, et une table qui se répartit toute seule redessine ses colonnes à chaque droit ajouté.
 */
.permissions-table,
.tools-table {
    table-layout: fixed;
}

.permissions-table :is(th, td),
.tools-table :is(th, td) {
    /* Une identité de droit ne porte pas d'espace : sans césure, elle pousse sa colonne au lieu
       de passer à la ligne. */
    overflow-wrap: anywhere;
}

/*
 * Le contexte et le droit prennent la place ; les trois colonnes de réponse ne portent qu'un mot
 * et n'en réclament aucune de plus.
 */
.permissions-table :is(th, td):nth-child(1) {
    width: 14%;
}

.permissions-table :is(th, td):nth-child(2) {
    width: 34%;
}

.tools-table :is(th, td):first-child {
    width: 34%;
}

/*
 * La colonne de ce que la personne obtient, elle, maintenant.
 *
 * Les autres colonnes disent la règle ; celle-ci dit le cas, et c'est elle qu'on vient lire quand
 * un bouton refuse. Un fond relevé suffit à la distinguer sans en faire une alerte : rien n'est
 * anormal à ce qu'un droit soit refusé.
 */
.permissions-table :is(th, td)[data-mine] {
    background: var(--app-raised);
}

/*
 * Le nom d'un outil, sous son libellé.
 *
 * L'entête d'un tableau du socle passe en majuscules, ce qui convient à « OUTIL » et pas à
 * « read_attachment » : un identifiant technique crié se relit mal, et ce n'est pas un titre.
 */
.tools-table th[scope="row"] {
    text-transform: none;
    font-weight: var(--app-weight-normal);
}

.tools-label {
    display: block;
    color: var(--app-ink);
    font-weight: var(--app-weight-bold);
}

.tools-name,
.tools-declaration .app-list-meta {
    display: block;
    color: var(--app-ink-muted);
    font-family: var(--app-font-mono, monospace);
    font-size: var(--app-text-xs);
}

/*
 * Les familles, repliées.
 *
 * Quarante-cinq droits ou vingt outils à la suite ne se parcourent pas : on vient toujours en
 * chercher un, et on le cherche par ce dont il parle. Fermées par défaut, les familles rendent
 * la page longue d'un écran au lieu de dix.
 *
 * `<details>` plutôt qu'un contrôleur : le pli est un comportement du navigateur, il fonctionne
 * sans JavaScript, et la recherche de la page l'ouvre toute seule sur ce qu'elle trouve.
 */
.dev-family {
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.dev-family + .dev-family {
    margin-top: var(--app-space-sm);
}

.dev-family > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--app-space-sm);
    padding: var(--app-space-md);
    border-radius: var(--app-radius);
    cursor: pointer;
}

.dev-family > summary:hover {
    background: var(--app-hover);
}

.dev-family[open] > summary {
    border-bottom: 1px solid var(--app-line);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.dev-family-name {
    color: var(--app-ink);
    font-weight: var(--app-weight-bold);
}

.dev-family-count {
    color: var(--app-ink-muted);
    font-size: var(--app-text-sm);
}

/* Le cadre de la famille porte déjà le trait : celui du tableau ferait un double filet. */
.dev-family .app-table-wrap {
    border: 0;
    border-radius: 0;
}

.dev-family .tools-declaration {
    margin-inline: var(--app-space-md);
}

/*
 * Une notice repliée. Le curseur et la puce disent qu'il y a quelque chose dessous : sans eux,
 * vingt lignes de titres se lisent comme une liste morte.
 */
.tools-declaration {
    padding-block: var(--app-space-2xs);
    border-bottom: 1px solid var(--app-line);
}

.tools-declaration > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--app-space-sm);
    padding: var(--app-space-2xs);
    border-radius: var(--app-radius-ui);
    cursor: pointer;
}

.tools-declaration > summary:hover {
    background: var(--app-hover);
}

/* Dépliés, ces deux-là redeviennent des blocs : ils s'empilent au lieu de suivre la puce. */
.tools-declaration > summary .tools-label,
.tools-declaration > summary .tools-name {
    display: inline;
}

/*
 * ── La trace, sur un écran qu'on tient d'une main ─────────────────────────────────────────────
 *
 * Elle est discrète par dessein et minuscule par conséquence. Son dessin ne change pas : c'est la
 * surface qui l'entoure qui atteint la mesure du doigt, et elle est invisible.
 */
@media (max-width: 37.5rem) {
    .chat-turn .chat-trace {
        position: relative;
    }

    .chat-turn .chat-trace::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--app-touch);
        height: var(--app-touch);
        transform: translate(-50%, -50%);
    }
}