/*
 * Feuille de style autonome et préfixée `ag-`.
 *
 * Les valeurs viennent des variables de la maquette Figma (Les greffiers,
 * nœud 2282-32729) : couleurs de marque, rayons, ombres et graisses y sont
 * nommés, et les noms d'origine sont rappelés en commentaire.
 *
 * Aucune classe utilitaire : le widget vit dans une application qui a son
 * propre Tailwind, et aucun sélecteur ne déborde de `.ag-root`.
 */
.ag-root {
  /* Colors/Brand/Primary/500 → Colors/Task/Indigo/400 */
  --ag-gradient-from: #1d7fce;
  --ag-gradient-to: #6d33ff;
  /* Colors/Task/Indigo/700, Indigo/900 */
  --ag-title: #2d009e;
  --ag-bubble-text: #1a005c;
  /* Content/Neutral/default, /secondary */
  --ag-text: #1c1d1f;
  --ag-text-muted: #666d74;
  --ag-white: #ffffff;
  /* ChatBar/default/border */
  --ag-border: #ced1d3;
  --ag-divider: #e2e8f0;
  --ag-danger: #b42318;

  /* Shadow violet, Elevations/md, Shadow stylised */
  --ag-shadow-violet: 0 3px 5px rgba(90, 110, 240, 0.35);
  --ag-shadow-bubble: 0 2px 1.5px rgba(0, 25, 189, 0.25);
  --ag-shadow-white-bubble: 0 4px 3px rgba(0, 0, 0, 0.12);
  --ag-shadow-chip: 0 8px 12px rgba(30, 50, 90, 0.08);
  --ag-shadow-panel: 0 8px 24px rgba(30, 50, 90, 0.08);

  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 16px 14px;
  gap: 10px;
  background: rgba(255, 255, 255, 0.48);
  border-radius: 18px;
  box-shadow: var(--ag-shadow-panel);
  color: var(--ag-text);
  /* Body/Default */
  font-family: 'Urbanist', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 16px;
  overflow: hidden;
  /* La fenêtre « Ce que l'assistant sait faire » se pose par-dessus le fil. */
  position: relative;
}

.ag-root *,
.ag-root *::before,
.ag-root *::after {
  box-sizing: inherit;
}

/* Inséré dans un panneau de l'hôte : celui-ci porte déjà le cadre, le fond et
   l'en-tête. Le widget ne rend alors que le fil et le composeur. */
.ag-root-bare {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ag-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}

.ag-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ag-logo {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ag-gradient-from) 0%, var(--ag-gradient-to) 100%);
  color: var(--ag-white);
  filter: drop-shadow(var(--ag-shadow-violet));
}

.ag-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  color: var(--ag-title);
  white-space: nowrap;
}

.ag-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ag-icon-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border-radius: 8px;
  color: var(--ag-title);
  --ag-ripple-opacity: 0.12;
}

.ag-icon-button:disabled {
  opacity: 0.4;
}

.ag-history {
  display: flex;
  flex: none;
  max-height: 40%;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: var(--ag-white);
  box-shadow: var(--ag-shadow-chip);
}

.ag-history-empty {
  margin: 0;
  padding: 6px 8px;
  color: var(--ag-text-muted);
}

.ag-history-item {
  /* Sans cela les entrées se compriment sous la hauteur de leur texte quand la
     liste dépasse `max-height`, et se chevauchent. */
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ag-text);
  text-align: left;
  --ag-ripple-opacity: 0.09;
}

/* Un titre est la première ligne du message : il peut être long, et c'est lui
   qui cède la place, jamais la date. */
.ag-history-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ag-history-date {
  flex: none;
  color: var(--ag-text-muted);
  font-size: 12px;
  font-weight: 400;
}


.ag-history-current {
  color: var(--ag-title);
  font-weight: 700;
}

.ag-stop {
  color: var(--ag-title);
}

/* Animable : sans enregistrement, la hauteur du fondu basculerait d'un coup au premier défilement. */
@property --ag-fade-top {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.ag-thread {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  /* Le dernier message repose au-dessus du trait du pied ; ce qui défile est coupé au trait même. */
  padding-bottom: 12px;
  /*
   * Un conteneur qui défile rogne aussi sur les côtés : collés à ses bords, les boutons perdaient
   * leur bord au survol (1,02) et leur ombre. 8 px de marge intérieure, rendus à l'extérieur : le
   * contenu ne bouge pas, mais déborde dans ces 8 px sans être coupé.
   */
  padding-inline: 8px;
  margin-inline: -8px;
  /* Défilé, le haut du fil s'efface dans le fond du panneau au lieu d'être tranché net. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-fade-top), #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-fade-top), #000 100%);
  transition: --ag-fade-top 200ms ease-out;
}

.ag-thread[data-scrolled] {
  --ag-fade-top: 28px;
}

.ag-empty {
  margin: auto 0;
  color: var(--ag-text-muted);
  text-align: center;
}

.ag-row {
  display: flex;
  flex-direction: column;
}

.ag-row-user {
  align-items: flex-end;
}

.ag-row-assistant {
  align-items: stretch;
}

.ag-bubble {
  overflow-wrap: anywhere;
}

/* Le message de l'utilisateur n'est pas du Markdown : ses retours à la ligne
   sont les siens. */
.ag-bubble-user {
  white-space: pre-wrap;
}

.ag-bubble p {
  margin: 0 0 8px;
}

.ag-bubble p:last-child {
  margin-bottom: 0;
}

.ag-bubble .ag-heading {
  font-weight: 700;
}

.ag-bubble ul,
.ag-bubble ol {
  margin: 0 0 8px;
  padding-left: 20px;
}

.ag-bubble li {
  margin-bottom: 4px;
}

.ag-bubble .ag-rule {
  margin: 10px 0;
  border: none;
  border-top: 1px solid rgba(45, 0, 158, 0.15);
}

.ag-bubble code {
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(45, 0, 158, 0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.ag-bubble a {
  color: var(--ag-title);
  text-decoration: underline;
}

/* Le nom d'une pièce qui l'ouvre : un lien du fil (couleur et soulignement ci-dessus), dont
   l'hôte, et non le navigateur, traite le clic. */
.ag-inline-action {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ag-inline-action:hover {
  text-decoration-thickness: 2px;
}

.ag-inline-action:focus-visible {
  outline: 2px solid var(--ag-gradient-to);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Un tableau large ne doit pas élargir le panneau : il défile pour son compte. */
.ag-table-scroll {
  overflow-x: auto;
  margin-bottom: 8px;
}

.ag-table {
  border-collapse: collapse;
  font-size: 13px;
}

.ag-table th,
.ag-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(45, 0, 158, 0.12);
  text-align: left;
  white-space: nowrap;
}

.ag-table th {
  font-weight: 700;
}

.ag-bubble-assistant {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  /* Deux couches, comme dans la maquette : la teinte de marque à 15 % posée
     sur un aplat blanc, sans quoi le texte perdrait son contraste. */
  background:
    linear-gradient(171.69deg, rgba(29, 127, 206, 0.15) 0%, rgba(109, 51, 255, 0.15) 100%),
    linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  box-shadow: var(--ag-shadow-bubble);
  color: var(--ag-bubble-text);
}

.ag-bubble-user {
  max-width: 88%;
  padding: 5px 14px;
  border-radius: 14px;
  background: var(--ag-white);
  box-shadow: var(--ag-shadow-white-bubble);
  color: var(--ag-text);
}

.ag-bubble-error {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fef3f2;
  color: var(--ag-danger);
}

/* Discret sous la bulle : un outil, pas une suite proposée comme les actions. */
.ag-copy {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--ag-text-muted);
  font-size: 12px;
  --ag-ripple-opacity: 0.12;
}

.ag-copy:not(:disabled):hover > .ag-surface {
  background: rgba(45, 0, 158, 0.06);
}

.ag-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ag-action {
  padding: 8px 12px;
  border-radius: 9999px;
  color: var(--ag-title);
  font-weight: 700;
  --ag-ripple-opacity: 0.09;
}

.ag-action > .ag-surface {
  border-color: var(--ag-gradient-to);
  background: var(--ag-white);
  box-shadow: var(--ag-shadow-chip);
}

.ag-action:not(:disabled):hover > .ag-surface {
  background: #f6f2ff;
}

.ag-status {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--ag-text-muted);
}

.ag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ag-gradient-to);
  animation: ag-pulse 1.2s ease-in-out infinite;
}

@keyframes ag-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-dot { animation: none; opacity: 0.7; }
}

.ag-footer {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  /* Collé au fil (l'écart du panneau annulé) : ce qui défile est coupé net sur le trait. */
  margin-top: -10px;
  padding-top: 12px;
  border-top: 1px solid var(--ag-divider);
}

.ag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ag-suggestion {
  padding: 8px 12px;
  border-radius: 9999px;
  color: var(--ag-text);
  font-weight: 700;
  line-height: 16px;
  transition: color 250ms ease-out;
  --ag-ripple-opacity: 0.09;
}

.ag-suggestion > .ag-surface {
  background: var(--ag-white);
  box-shadow: var(--ag-shadow-chip);
}

.ag-suggestion:hover:not(:disabled) {
  color: var(--ag-title);
}

.ag-suggestion:disabled {
  opacity: 0.5;
}

/* Le rembourrage de 8 px est celui de la maquette : c'est lui qui donne sa
   hauteur au composeur. Il formerait un anneau mort au clic, d'où le
   gestionnaire qui fait du cadre l'étiquette du champ (voir ChatWidget). */
.ag-composer {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--ag-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
  cursor: text;
}

.ag-composer:focus-within {
  border-color: var(--ag-gradient-to);
}

.ag-input {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  overflow-y: auto;
  padding: 8px 10px 8px 12px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ag-text);
  font: inherit;
}

.ag-input::placeholder {
  color: var(--ag-text-muted);
}

.ag-send {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 8px;
  border-radius: 16px;
  color: var(--ag-text-muted);
  --ag-ripple-opacity: 0.12;
}

.ag-send:not(:disabled) {
  color: var(--ag-title);
}

.ag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--ag-text-muted);
  font-size: 12px;
  cursor: pointer;
}

/* Le vrai champ reste dans l'arbre d'accessibilité : seul son dessin est remplacé. */
.ag-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ag-toggle-track {
  position: relative;
  width: 24px;
  height: 14px;
  flex: none;
  border-radius: 7px;
  background: var(--ag-border);
  transition: background 0.15s;
}

.ag-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}

.ag-toggle input:checked + .ag-toggle-track {
  background: var(--ag-gradient-to);
}

.ag-toggle input:checked + .ag-toggle-track::after {
  transform: translateX(10px);
}

.ag-toggle input:focus-visible + .ag-toggle-track {
  outline: 2px solid var(--ag-gradient-to);
  outline-offset: 2px;
}

.ag-connection {
  color: var(--ag-text-muted);
  font-size: 12px;
}

/*
 * La mécanique du `Button` du logiciel greffier (`PressButton`). Le bouton porte le libellé et ne
 * bouge pas ; sa surface (`.ag-surface`), posée dessous, porte fond, bordure et ombre : elle seule
 * grossit au survol (1,02), s'enfonce à l'appui (0,99), au rebond de 250 ms, et accueille l'onde
 * née au point d'appui. Valeurs reprises d'`InteractiveSurface` côté logiciel.
 */
.ag-press {
  position: relative;
  isolation: isolate;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ag-press:disabled {
  cursor: not-allowed;
}

.ag-press:focus-visible {
  outline: 2px solid var(--ag-gradient-to);
  outline-offset: 2px;
}

.ag-surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition-property: scale, background-color, border-color, box-shadow;
  transition-duration: 250ms;
  /* Rebond réservé à l'échelle, sortie douce pour les couleurs et l'ombre. */
  transition-timing-function: cubic-bezier(0.01, 0.47, 0.64, 1.59), ease-out, ease-out, ease-out;
}

.ag-press:not(:disabled):hover > .ag-surface {
  scale: 1.02;
}

.ag-press:not(:disabled):active > .ag-surface {
  scale: 0.99;
  transition-duration: 150ms;
}

/* Les boutons fantômes : la surface n'apparaît qu'au survol. */
.ag-icon-button:not(:disabled):hover > .ag-surface,
.ag-send:not(:disabled):hover > .ag-surface {
  background: rgba(45, 0, 158, 0.06);
}

/* Une ligne de liste éclot : invisible et en retrait au repos, pleine au survol, sans dépasser 1
   (la liste défile et rognerait le 1,02 du bouton). */
.ag-history-item > .ag-surface {
  scale: 0.97;
}

.ag-history-item:not(:disabled):hover > .ag-surface {
  scale: 1;
  background: rgba(45, 0, 158, 0.06);
}

.ag-history-item:not(:disabled):active > .ag-surface {
  scale: 0.98;
}

.ag-ripple {
  position: absolute;
  border-radius: 50%;
  /* L'onde emprunte la couleur du texte du bouton. */
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  animation: ag-ripple 700ms ease-out;
}

@keyframes ag-ripple {
  from {
    transform: scale(0);
    opacity: var(--ag-ripple-opacity, 0.18);
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/*
 * Les entrées : tout ce qui s'ajoute au fil (bulles, état, actions, puces, historique) arrive au
 * tempo vif du logiciel, 4 px de montée en 360 ms, 35 ms d'un élément à l'autre (`--ag-rank`).
 * Remplissage `backwards` : invisible pendant son délai, plus rien d'appliqué une fois arrivé.
 */
@keyframes ag-enter {
  from {
    opacity: 0;
    translate: 0 4px;
  }
}

/*
 * « Ce que l'assistant sait faire » (maquette 5439:800). Fenêtre blanche posée sur le fil : liste
 * des rubriques, puis les questions d'une rubrique. Bordures et fonds des boutons sur leur
 * `.ag-surface`, la couche qui grossit et s'enfonce.
 */
.ag-capabilities {
  /* Content/Neutral/tertiary, Border/Neutral/light, Surface/Neutral/background-2 */
  --ag-text-faint: #81888f;
  --ag-border-light: #e5e7e8;
  --ag-surface-soft: #f7f8f8;

  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  flex-direction: column;
  height: min(540px, 100%);
  overflow: hidden;
  border-radius: 16px;
  background: var(--ag-white);
  /* Shadow maxi */
  box-shadow:
    0 4px 6px -2px rgba(16, 24, 40, 0.05),
    0 12px 16px -4px rgba(16, 24, 40, 0.1),
    0 8px 24px rgba(30, 50, 90, 0.08),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.7);
}

/* Avec son propre en-tête, le widget pose la fenêtre dessous, comme la maquette (top 55, left 4). */
.ag-root:not(.ag-root-bare) > .ag-capabilities {
  inset: 55px 4px auto;
  height: min(540px, calc(100% - 59px));
}

.ag-capabilities-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 4px 16px;
}

.ag-capabilities-bar:has(.ag-capabilities-icon:first-child:not(:last-child)) {
  padding-left: 12px;
}

.ag-capabilities-heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--ag-text-faint);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
}

.ag-capabilities-icon {
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ag-text);
  cursor: pointer;
}

.ag-capabilities-icon:focus-visible {
  outline: 2px solid var(--ag-gradient-to);
  outline-offset: 2px;
  border-radius: 4px;
}

.ag-capabilities-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  padding: 12px;
}

.ag-capabilities-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ag-capabilities-note {
  margin: 0;
  padding: 8px 12px;
  color: var(--ag-text-muted);
}

.ag-capabilities-footnote {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: auto 0 0;
  padding-top: 12px;
  color: var(--ag-text-muted);
  font-size: 12px;
  line-height: 14px;
}

.ag-capability-card {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--ag-text);
  text-align: left;
  --ag-ripple-opacity: 0.06;
}

.ag-capability-card > .ag-surface {
  border-radius: 12px;
}

.ag-capability-card-current > .ag-surface,
.ag-capability-card:not(:disabled):hover > .ag-surface {
  border-color: var(--ag-border-light);
  background: var(--ag-surface-soft);
}

.ag-capability-tag {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--ag-white);
  /* Elevations/sm */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ag-capability-card-content {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.ag-capability-card-title {
  font-weight: 700;
  line-height: 16px;
}

.ag-capability-card-page {
  margin-left: 8px;
  color: var(--ag-text-faint);
  font-weight: 400;
}

.ag-capability-card-count {
  color: var(--ag-text-muted);
  font-size: 12px;
  line-height: 14px;
}

.ag-capabilities-detail {
  gap: 0;
  padding: 4px 16px 12px;
}

.ag-capability {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 4px;
}

.ag-capability + .ag-capability {
  border-top: 1px solid var(--ag-border-light);
}

.ag-capability-title {
  margin: 0;
  color: var(--ag-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.ag-capability-summary {
  margin: 0;
  color: var(--ag-text-muted);
}

.ag-capability-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.ag-capability-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--ag-text);
  text-align: left;
  --ag-ripple-opacity: 0.06;
}

.ag-capability-question > .ag-surface {
  border-color: var(--ag-border-light);
  border-radius: 12px;
  background: var(--ag-white);
}

.ag-capability-question:not(:disabled):hover > .ag-surface {
  background: var(--ag-surface-soft);
}

.ag-glyph {
  display: block;
  flex: none;
}

.ag-capability-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
}

.ag-capability-text {
  flex: 1;
  min-width: 0;
}

@keyframes ag-drop {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

@keyframes ag-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

.ag-enter {
  animation: ag-enter 360ms cubic-bezier(0.2, 0, 0, 1) backwards;
  animation-delay: calc(var(--ag-rank, 0) * 35ms);
}

.ag-drop {
  animation: ag-drop 240ms cubic-bezier(0.2, 0, 0, 1) backwards;
}

/* L'icône du bouton d'envoi qui change (micro, envoi, arrêt) : le rebond du bouton. */
.ag-pop {
  animation: ag-pop 250ms cubic-bezier(0.01, 0.47, 0.64, 1.59) backwards;
}

/* L'hôte a coupé les animations d'entrée : tout est là d'emblée, l'onde et le survol restent. */
.ag-root-static .ag-enter,
.ag-root-static .ag-drop,
.ag-root-static .ag-pop {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .ag-enter,
  .ag-drop,
  .ag-pop {
    animation: none;
  }

  .ag-surface {
    transition-property: background-color, border-color, box-shadow;
  }

  .ag-press:not(:disabled):hover > .ag-surface,
  .ag-press:not(:disabled):active > .ag-surface,
  .ag-history-item > .ag-surface {
    scale: 1;
  }

  /* Masquée et non retirée : l'animation doit finir pour que l'onde soit nettoyée. */
  .ag-ripple {
    visibility: hidden;
  }

  .ag-thread {
    transition: none;
  }
}