*, *::before, *::after { box-sizing: border-box; }

.fr-ui {
  color: var(--fr-color-ink);
  font-family: var(--fr-font-sans);
  font-weight: var(--fr-font-weight-regular);
}

.fr-icon-button,
.fr-avatar,
.fr-send,
.fr-file-remove {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.fr-icon-button {
  width: var(--fr-size-action);
  height: var(--fr-size-action);
  border-radius: var(--fr-radius-action);
  background: transparent;
  transition: background var(--fr-duration-default) var(--fr-ease), transform var(--fr-duration-default) var(--fr-ease);
}

.fr-icon-button:hover,
.fr-icon-button:focus-visible {
  background: rgba(255, 255, 255, 0.72);
  outline: none;
  transform: translateY(-1px);
}

.fr-icon-button--primary {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--fr-shadow-primary);
}

.fr-icon-button img { width: 18px; height: 18px; opacity: 0.68; }
.fr-rail .fr-icon-button img { width: var(--fr-size-action-icon); height: var(--fr-size-action-icon); }

.fr-avatar {
  width: var(--fr-size-action);
  height: var(--fr-size-action);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff 0 28%, #eef0ed 48%, #c9cec9 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 5px 14px rgba(44, 51, 45, 0.11);
}

.fr-avatar img { width: 18px; height: 18px; opacity: 0.48; }

.fr-day {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--fr-color-faint);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.fr-day::before,
.fr-day::after { content: ""; height: 1px; flex: 1; background: var(--fr-color-line); }

.fr-message { max-width: var(--fr-size-content); }
.fr-message--user { max-width: var(--fr-size-user-message); margin-left: auto; }
.fr-message-time { display: block; margin: 0 4px 7px; color: var(--fr-color-faint); font-size: 9px; letter-spacing: 0.025em; }
.fr-message--user .fr-message-time { text-align: right; }
/* Au-dessus d'une réponse, ce microtexte porte une DURÉE, pas une heure.
   Chiffres à chasse fixe : sans eux, « 1,9 s » puis « 12,4 s » font
   sautiller la colonne d'un message à l'autre. */
.fr-message-duree { font-variant-numeric: tabular-nums; }

.fr-bubble { padding: 16px 20px; border-radius: var(--fr-radius-message); font-size: 15px; line-height: 1.55; letter-spacing: -0.012em; }
.fr-message--user .fr-bubble {
  border-bottom-right-radius: 6px;
  color: #2e3540;
  background: var(--fr-color-user);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 8px 24px rgba(67, 79, 104, 0.025);
}
.fr-message--assistant .fr-bubble { padding: 0; }

.fr-quote {
  margin: 18px 0;
  padding: 15px 18px;
  border: 0;
  border-left: 2px solid var(--fr-color-accent);
  border-radius: 0 var(--fr-radius-quote) var(--fr-radius-quote) 0;
  color: #3f443f;
  background: var(--fr-quote-background);
  font-size: 14px;
  line-height: 1.55;
}

.fr-source,
.fr-file-card {
  border: 1px solid var(--fr-color-line);
  border-radius: var(--fr-radius-card);
  background: var(--fr-card-background);
}

.fr-source {
  width: min(310px, 100%);
  min-height: 62px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 10px;
  color: #454b45;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: background var(--fr-duration-default) var(--fr-ease), border-color var(--fr-duration-default) var(--fr-ease), transform var(--fr-duration-default) var(--fr-ease);
}
.fr-source:hover,
.fr-source:focus-visible { border-color: rgba(70, 82, 71, 0.18); background: #fff; outline: none; transform: translateY(-1px); }
.fr-source-service,
.fr-file-preview { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--fr-radius-subaction); background: rgba(255, 255, 255, 0.82); }
.fr-source-service img { width: 22px; height: 22px; object-fit: contain; }
.fr-source-copy,
.fr-file-copy { min-width: 0; display: grid; gap: 4px; }
.fr-source-copy strong,
.fr-file-name { overflow: hidden; color: #3f454e; font-size: 11px; font-weight: 400; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.fr-source-copy small,
.fr-file-meta { overflow: hidden; color: var(--fr-color-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fr-source-open { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.56); transition: background var(--fr-duration-fast) var(--fr-ease), transform var(--fr-duration-fast) var(--fr-ease); }
.fr-source-open img { width: 13px; height: 13px; opacity: 0.58; }
.fr-source:hover .fr-source-open { background: rgba(255, 255, 255, 0.94); transform: translate(1px, -1px); }

.fr-file-card {
  position: relative;
  width: 148px;
  height: 62px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 28px 9px 9px;
  color: #454b54;
}
.fr-file-preview { overflow: hidden; color: #68717d; background: rgba(255, 255, 255, 0.72); }
.fr-file-preview img { width: 100%; height: 100%; object-fit: cover; }
.fr-file-glyph { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fr-file-name { font-size: 10px; }
.fr-file-meta { font-size: 8px; }
.fr-file-remove { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.58); transition: background var(--fr-duration-fast) var(--fr-ease), transform var(--fr-duration-fast) var(--fr-ease); }
.fr-file-remove:hover { background: rgba(255, 255, 255, 0.95); transform: scale(0.96); }
.fr-file-remove img { width: 10px; height: 10px; opacity: 0.55; }

/* ── Arrivée d'une pièce jointe ──────────────────────────────────────
   L'anneau se dessine dans le sens horaire autour du CARRÉ d'aperçu,
   depuis le haut au centre, pendant qu'un pourcentage compte dans le
   coin. À 100 le pourcentage se floute et s'efface, la suppression se
   floute et apparaît : ce qui informe cède la place à ce qui agit.
   Jamais autour de la carte entière — seulement l'aperçu.

   La piste sous l'anneau n'est pas décorative : sans elle, un accent
   clair disparaît sur une photo claire. */

.fr-file-preview { position: relative; }

.fr-file-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 240ms var(--fr-ease);
}
.fr-file-ring rect { fill: none; stroke-width: 2; }
.fr-file-ring .fr-ring-piste { stroke: rgba(17, 21, 27, 0.12); }
.fr-file-ring .fr-ring-trait { stroke: var(--fr-color-accent); stroke-linecap: round; }
.fr-file-ring.is-partie { opacity: 0; }

.fr-file-pct {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 3px;
  border-radius: var(--fr-radius-pill);
  color: #fff;
  background: rgba(17, 21, 27, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 7px;
  font-weight: var(--fr-font-weight-medium);
  line-height: 1.6;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: opacity 240ms var(--fr-ease), filter 240ms var(--fr-ease);
}
.fr-file-pct.is-partie { opacity: 0; filter: blur(4px); }

.fr-file-card .fr-file-remove {
  transition: background var(--fr-duration-fast) var(--fr-ease), transform var(--fr-duration-fast) var(--fr-ease),
    opacity 240ms var(--fr-ease), filter 240ms var(--fr-ease);
}
.fr-file-card.is-chargement .fr-file-remove { opacity: 0; filter: blur(4px); pointer-events: none; }

html[data-theme="dark"] .fr-file-ring .fr-ring-piste { stroke: rgba(255, 255, 255, 0.14); }
/* Pas de vert vif en mode sombre : l'accent profond, qui est un teal. */
html[data-theme="dark"] .fr-file-ring .fr-ring-trait { stroke: var(--fr-color-accent-deep); }

.fr-composer { width: min(var(--fr-size-composer), 100%); display: grid; grid-template-columns: 40px 1fr 46px; align-items: center; gap: 10px; }
.fr-composer-input {
  width: 100%;
  height: var(--fr-size-field);
  min-width: 0;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: var(--fr-radius-pill);
  outline: none;
  color: var(--fr-color-ink);
  background: var(--fr-field-background);
  box-shadow: var(--fr-shadow-field);
  font: 400 13px var(--fr-font-sans);
  caret-color: #1d201d;
}
.fr-composer-input::placeholder { color: #a3a8a1; }
.fr-send { width: var(--fr-size-send); height: var(--fr-size-send); border-radius: 50%; color: white; background: var(--fr-color-send); box-shadow: 0 7px 18px rgba(25, 29, 34, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform var(--fr-duration-default) var(--fr-ease), background var(--fr-duration-default) var(--fr-ease); }
.fr-send:hover { background: var(--fr-color-send-hover); transform: translateY(-1px); }
.fr-send img { width: 16px; height: 16px; filter: invert(1); }

.fr-popover {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--fr-radius-card);
  background: var(--fr-popover-background);
  box-shadow: var(--fr-shadow-popover);
  backdrop-filter: blur(24px);
}

/* ── Recherche : une seule croix, et les passages trouvés ────────────
 *
 * Un champ `type=search` reçoit du navigateur SA PROPRE croix, posée juste
 * à côté de celle qu'on dessine : deux croix côte à côte, dont une qu'on ne
 * peut ni styler, ni déplacer, ni aligner. On retire la sienne, et la nôtre
 * prend les deux rôles — elle EFFACE tant qu'il y a du texte, elle FERME une
 * fois le champ vide. La touche Échap suit la même échelle.
 *
 * Mesuré : sur un champ nu, cliquer le bord droit vide le champ ; sur
 * celui-ci, il ne se passe rien. C'est la règle ci-dessous qui fait la
 * différence, et rien d'autre.
 */
.fr-search-input::-webkit-search-cancel-button,
.fr-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.fr-search-state { margin: 10px 3px 0; color: var(--fr-color-faint); font-size: 11px; letter-spacing: 0.01em; }

.fr-search-results { max-height: min(46vh, 420px); margin: 0; padding: 0; overflow: auto; list-style: none; scrollbar-width: thin; }
.fr-search-results:not(:empty) { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--fr-color-line); }

.fr-result { width: 100%; display: grid; gap: 3px; padding: 8px 9px; border: 0; border-radius: var(--fr-radius-subaction); background: transparent; color: var(--fr-color-ink); font: inherit; text-align: left; cursor: pointer; }
.fr-result:hover,
.fr-result.is-visee,
.fr-result:focus-visible { background: rgba(39, 45, 41, 0.055); outline: 0; }
.fr-result-head { display: flex; gap: 7px; align-items: baseline; font-size: 10px; letter-spacing: 0.02em; }
.fr-result-date { color: var(--fr-color-muted); }
.fr-result-who { color: var(--fr-color-faint); }
.fr-result-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fr-color-muted); font-size: 12.5px; line-height: 1.45; }

/* Ce qui est trouvé se distingue par la GRAISSE, jamais par un aplat de
   couleur : le jaune du navigateur n'appartient à aucun des deux thèmes. */
.fr-result mark { background: transparent; color: var(--fr-color-ink); font-weight: 600; }

/* Le passage retrouvé : une plaque teintée qui éclôt autour de lui, tient le
   temps qu'on la voie, puis se dissout en 2,6 s. Une marque permanente ferait
   de chaque recherche une trace de plus à lire, et la conversation finirait
   balisée de vieilles questions.

   Dessinée en `box-shadow`, donc HORS du flux : ni la hauteur du message ni
   la position de ses voisins ne bougent. Une plaque qui décale ce qu'on vient
   de viser manque sa cible en apparaissant.

   Le saut, lui, est instantané — il le doit, les journées se chargent pendant
   le trajet. C'est cette éclosion qui dit qu'on est arrivé. */
.fr-message.is-trouve { border-radius: 24px; animation: fr-retrouve 2600ms var(--fr-ease) forwards; }

@keyframes fr-retrouve {
  0%   { box-shadow: 0 0 0 22px transparent, 0 0 0 1px transparent; }
  12%  { box-shadow: 0 0 0 14px var(--fr-color-halo-soft), 0 0 0 1px var(--fr-color-halo); }
  58%  { box-shadow: 0 0 0 14px var(--fr-color-halo-soft), 0 0 0 1px var(--fr-color-halo); }
  100% { box-shadow: 0 0 0 14px transparent, 0 0 0 1px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-message.is-trouve {
    animation: none;
    box-shadow: 0 0 0 14px var(--fr-color-halo-soft), 0 0 0 1px var(--fr-color-halo);
  }
}

html[data-theme="dark"] .fr-icon-button:hover,
html[data-theme="dark"] .fr-icon-button:focus-visible { background: rgba(255, 255, 255, 0.075); }
html[data-theme="dark"] .fr-icon-button--primary { background: rgba(220, 229, 243, 0.105); }
html[data-theme="dark"] .fr-avatar { background: radial-gradient(circle at 35% 28%, #343c48 0 24%, #222934 48%, #12171e 100%); box-shadow: inset 0 0 0 1px rgba(224, 231, 241, 0.28), 0 7px 18px rgba(0, 0, 0, 0.24); }
html[data-theme="dark"] .fr-icon-button img,
html[data-theme="dark"] .fr-avatar img,
html[data-theme="dark"] .fr-file-remove img,
html[data-theme="dark"] .fr-source-open img { filter: invert(1); }
html[data-theme="dark"] .fr-message--user .fr-bubble { color: #f0f2f5; border: 1px solid rgba(226, 233, 242, 0.12); background: linear-gradient(145deg, #4a515b, #40464f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 28px rgba(0, 0, 0, 0.13); }
html[data-theme="dark"] .fr-quote { color: #e0e3e7; border-left-color: #0b776d; }
html[data-theme="dark"] .fr-source { color: #cbd2dc; border-color: rgba(206, 220, 243, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
html[data-theme="dark"] .fr-source:hover { border-color: rgba(211, 224, 245, 0.14); background: #202733; }
html[data-theme="dark"] .fr-source-service { background: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] .fr-source-copy strong,
html[data-theme="dark"] .fr-file-name { color: #e1e5ea; }
html[data-theme="dark"] .fr-source-open,
html[data-theme="dark"] .fr-file-remove { background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .fr-file-card { color: #c8cdd4; border-color: rgba(207, 220, 242, 0.08); }
html[data-theme="dark"] .fr-file-preview { color: #aeb5bf; background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .fr-composer-input { border-color: rgba(224, 231, 241, 0.24); caret-color: #f2f4f6; }
html[data-theme="dark"] .fr-composer-input::placeholder { color: #707b8b; }
html[data-theme="dark"] .fr-send { color: #11151b; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26), inset 0 1px 0 #fff; }
html[data-theme="dark"] .fr-send img { filter: none; }
html[data-theme="dark"] .fr-popover { border-color: rgba(210, 224, 247, 0.08); }
html[data-theme="dark"] .fr-result:hover,
html[data-theme="dark"] .fr-result.is-visee,
html[data-theme="dark"] .fr-result:focus-visible { background: rgba(255, 255, 255, 0.065); }

@media (max-width: 680px) {
  .fr-bubble { font-size: 14px; }
  .fr-file-card { width: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  .fr-ui *, .fr-ui *::before, .fr-ui *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}


/* Libellé réservé aux lecteurs d'écran. Le produit étiquette ses champs par
   leur placeholder (« Demander », « Rechercher ») : sans ce repli, un champ
   n'a pas de nom pour qui ne voit pas la page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}