/* =====================================================================
   Agent Forex — retouches d'interface Chainlit
   Chargé via .chainlit/config.toml → [UI] custom_css = "/public/custom.css"
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Bouton "Lisez-moi" (Readme) — masqué.
   Il affichait le contenu de chainlit.md ; inutile ici, et son libellé
   traduit débordait de l'en-tête (on ne voyait que « -moi »).
   Sélecteur #readme-button vérifié dans le bundle frontend de Chainlit.
   --------------------------------------------------------------------- */
#readme-button {
  display: none !important;
}

/* ---------------------------------------------------------------------
   2. Barre de défilement — sombre au lieu du blanc par défaut, et surtout
   GOUTTIÈRE STABLE : `scrollbar-gutter: stable` réserve en permanence la
   place de la barre. Sans ça, son apparition/disparition pendant que le
   texte arrive en streaming change la largeur utile → tout le texte se
   ré-agence latéralement à chaque token (l'effet « le texte bouge »).
   --------------------------------------------------------------------- */
* {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

html,
body,
[class*="overflow-y-auto"],
[class*="overflow-auto"] {
  scrollbar-gutter: stable;
}

/* WebKit / Chromium (ton navigateur) */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;                      /* supprime la bande blanche */
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------------------------------------------------------------------
   3. Stabilité du texte pendant le streaming.
   Le markdown est re-rendu à chaque token qui arrive. Deux causes de
   « tremblement » traitées ici :
   - la césure automatique qui recalcule les coupures de mots à chaque
     ajout de texte → on fige la stratégie de retour à la ligne ;
   - les ligatures/variantes de police qui se recomposent en cours de
     frappe → on les désactive sur le fil de conversation.
   --------------------------------------------------------------------- */
.message-content,
.message-content * {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;                                /* pas de césure recalculée */
  font-variant-ligatures: none;                 /* pas de recomposition */
  font-kerning: none;
  text-rendering: optimizeSpeed;                /* pas de re-mesure fine */
}

/* Largeur de ligne figée : le conteneur ne doit jamais se redimensionner
   au fil de l'arrivée du texte. */
.message-content {
  max-width: 100%;
  contain: layout style;                        /* isole les recalculs */
}

/* =====================================================================
   4. FINITION PREMIUM — rapprocher le rendu de Claude.ai
   ===================================================================== */

/* 4a. Chips d'outils (chaîne de pensée) discrets, façon Claude.
   Chaque Step de type tool/llm/run est un `.step[data-step-type=...]`
   (attribut vérifié dans le bundle). On masque l'avatar de CES chips
   uniquement — le vrai message assistant (data-step-type="assistant_message")
   garde le sien. Résultat : les outils deviennent des lignes fines et
   sobres au lieu de gros blocs avec un rond gris/favicon à côté. */
.step[data-step-type="tool"] .ai-message > span:first-child,
.step[data-step-type="llm"] .ai-message > span:first-child,
.step[data-step-type="run"] .ai-message > span:first-child {
  display: none !important;
}
.step[data-step-type="tool"] .ai-message,
.step[data-step-type="llm"] .ai-message,
.step[data-step-type="run"] .ai-message {
  gap: 0 !important;                             /* plus d'espace réservé à l'avatar masqué */
  opacity: 0.85;
  font-size: 0.92rem;
}

/* 4b. Message assistant — un peu d'air, largeur de lecture confortable. */
.step[data-step-type="assistant_message"] {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* 4c. Avatar du message assistant : cadré net, léger relief. */
.ai-message > span:first-child img,
.ai-message > span:first-child {
  border-radius: 9999px;
}

/* 4d. Bulle utilisateur — coins plus doux, cohérente avec le --radius du thème. */
[data-step-type="user_message"] .message-content {
  border-radius: var(--radius, 0.85rem);
}

/* 4e. Filigrane de pied de page « Les LLMs peuvent se tromper » — discret. */
.watermark {
  opacity: 0.4;
  font-size: 0.72rem;
}

/* 4g. Images multiples (captures de chart) attachées à un message — vignettes façon Claude.ai
   au lieu de la grosse grille 2×2 par défaut de Chainlit.
   Sélecteur vérifié dans le bundle frontend : `max-w-[600px]` est UNIQUE dans tout le bundle JS
   (1 seule occurrence, confirmé par grep) — combiné à grid/grid-cols-4/gap-2/w-full, ça cible
   PRÉCISÉMENT le conteneur de la liste d'images multiples de Chainlit (rKn/aKn), sans toucher au
   cas une-seule-image (qui n'a pas les classes grid/grid-cols-4/gap-2) ni aucun autre composant.
   On passe la grille en rangée horizontale de vignettes carrées, recadrées, avec défilement — le
   clic pour agrandir en plein écran (géré par Chainlit) continue de fonctionner sans y toucher.

   Alignement À DROITE (ajusté le 2026-07-22, signalé par l'utilisateur + vérifié : Claude.ai/
   ChatGPT alignent les pièces jointes de l'utilisateur du MÊME côté que sa bulle de message, pas
   à gauche comme le fait Chainlit par défaut). Le conteneur est déjà `w-full` (pleine largeur de
   la colonne) — seul `justify-content` manquait pour pousser les vignettes contre le bord droit,
   là où se trouve la bulle du message juste en dessous. */
div.grid.grid-cols-4.gap-2.w-full[class*="max-w-[600px]"] {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: flex-end;         /* vignettes collées à droite, comme la bulle du message */
  overflow-x: auto;
  max-width: 100% !important;
  gap: 8px;
  padding-bottom: 2px;               /* place pour la barre de défilement fine */
}
div.grid.grid-cols-4.gap-2.w-full[class*="max-w-[600px]"] > div {
  flex: 0 0 84px;                    /* vignette carrée fixe, ne rétrécit/grossit pas */
  width: 84px;
  height: 84px;
}
div.grid.grid-cols-4.gap-2.w-full[class*="max-w-[600px]"] > div > div {
  width: 100%;
  height: 100%;
}
div.grid.grid-cols-4.gap-2.w-full[class*="max-w-[600px]"] img.inline-image {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* recadre au lieu d'écraser l'image dans le carré */
}

/* 4f. Transitions douces sur les éléments interactifs (survol sidebar, boutons). */
button,
a,
[role="button"] {
  transition: background-color 0.15s ease, opacity 0.15s ease, color 0.15s ease;
}