/* ClaudeChat — theme sombre, chaud, sobre.
   Deux familles : une serif pour le nom du produit et les titres de
   discussion, une sans-serif pour tout le reste de l'interface. Un seul
   accent (un laiton mat) reserve aux actions principales et a l'etat actif ;
   la structure se lit par des filets, pas par des ombres. */

:root {
  color-scheme: dark;

  --bg: #14161c;
  --bg-elevated: #1b1e26;
  --surface: #232733;
  --surface-hover: #2b303e;
  --surface-active: #333a4a;
  --border: #313644;
  --border-vif: #454c5f;

  --text: #eae7e0;
  --text-dim: #9a9fb0;
  --text-faint: #6b7086;

  --accent: #c99a5f;
  --accent-forte: #dbb27a;
  --accent-encre: #241a0c;
  /* Éclairci depuis #d9705f : à l'ancienne valeur, `.erreur` tombait à
     4,43:1 et `.reessayer` à 4,39:1 sur leurs fonds respectifs, juste sous le
     seuil AA pour du texte de cette taille. Deux éléments échouaient de la
     même façon, pour la même raison : c'est le jeton qu'il fallait corriger,
     pas chaque règle. Les deux passent maintenant à 5,3:1 et 5,2:1, et aucun
     autre usage de ce jeton ne descend en dessous de 5:1. */
  --danger: #e28275;
  --danger-fond: #3a2420;

  --bulle-user-fond: #2c3b4a;
  --bulle-user-texte: #dbe6ee;
  --bulle-user-bord: #3c5064;
  --bulle-assistant-fond: #262a35;
  --bulle-assistant-texte: #e7e4dd;
  --bulle-assistant-bord: #3a3020;

  /* Bulle d'un message écrit par l'autre participant : une teinte prune,
     franchement distincte du bleu de ses propres messages comme du gris
     chaud de l'assistant. */
  --bulle-autrui-fond: #37303f;
  --bulle-autrui-texte: #e4dcec;
  --bulle-autrui-bord: #4f4459;

  --font-affichage: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  --rayon-petit: 6px;
  --rayon-moyen: 10px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2 {
  font-family: var(--font-affichage);
  font-weight: 400;
  margin: 0;
}

button,
input,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Ecrans : un seul visible a la fois via [hidden] --- */

.ecran {
  height: 100%;
}

#ecran-connexion[hidden],
#ecran-principal[hidden],
#ecran-invitation[hidden] {
  display: none;
}

/* --- Ecran de connexion / ecran d'invitation : meme mise en page, une carte
   centree --- */

#ecran-connexion,
#ecran-invitation {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.carte {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--rayon-moyen);
}

.carte h1 {
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 4px;
}

.carte label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.carte input {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text);
}

.carte input:focus-visible {
  border-color: var(--accent);
}

.carte button[type="submit"] {
  margin-top: 4px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-encre);
  border: none;
  border-radius: var(--rayon-petit);
  font-weight: 600;
}

.carte button[type="submit"]:hover {
  background: var(--accent-forte);
}

.erreur {
  margin: 0;
  padding: 8px 10px;
  background: var(--danger-fond);
  color: var(--danger);
  border-radius: var(--rayon-petit);
  font-size: 0.85rem;
}

/* --- Ecran d'invitation : liste de regles vivant a la frappe --- */

#invitation-nom {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}

#regles-mot-de-passe {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* La couleur ne doit jamais porter seule l'information : une règle satisfaite
   change aussi de marque, ce qui reste lisible pour un daltonien comme en
   noir et blanc.
   Spécificité : `#regles-mot-de-passe li::before` vaut (1,0,2) — un id, aucune
   classe, deux sélecteurs de type (`li` et le pseudo-élément) — et la variante
   `.ok::before` vaut (1,1,2), qui l'emporte donc bien sur la première. */
#regles-mot-de-passe li::before {
  content: "○ ";
}

#regles-mot-de-passe li.ok {
  color: var(--accent);
}

#regles-mot-de-passe li.ok::before {
  content: "✔ ";
}

.bandeau-avertissement {
  margin: 0;
  padding: 10px 24px;
  background: var(--danger-fond);
  color: var(--danger);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.bandeau-avertissement[hidden] {
  display: none;
}

/* --- Ecran principal : coquille en deux colonnes --- */

#ecran-principal {
  display: flex;
  height: 100%;
  overflow: hidden;
}

#barre-laterale {
  flex: 0 0 280px;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  min-height: 0;
}

.entete-laterale {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

#btn-nouvelle {
  padding: 9px 12px;
  background: var(--accent);
  color: var(--accent-encre);
  border: none;
  border-radius: var(--rayon-petit);
  font-weight: 600;
  text-align: left;
}

#btn-nouvelle:hover {
  background: var(--accent-forte);
}

#champ-recherche {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text);
}

#champ-recherche::placeholder {
  color: var(--text-faint);
}

#champ-recherche:focus-visible {
  border-color: var(--accent);
}

#liste-discussions {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 8px;
}

#liste-discussions li {
  padding: 10px 12px;
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#liste-discussions li:hover {
  background: var(--surface-hover);
  color: var(--text);
}

#liste-discussions li.actif {
  background: var(--surface-active);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.pied-laterale {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

#nom-utilisateur {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.pied-laterale button {
  flex: 0 0 auto;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
  font-size: 0.8rem;
}

.pied-laterale button:hover {
  border-color: var(--border-vif);
  color: var(--text);
}

/* --- Zone principale --- */

#zone-principale {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#entete-discussion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

#entete-discussion[hidden] {
  display: none;
}

#titre-discussion {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.15rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#entete-discussion > div {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

#entete-discussion button {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
  font-size: 0.85rem;
}

#entete-discussion button:hover {
  border-color: var(--border-vif);
  color: var(--text);
}

/* Fil de discussion : rempli par la tache 13, mais le defilement et les
   bulles user/assistant appartiennent au socle visuel de cette tache. */

#fil {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

.message {
  max-width: 65ch;
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--rayon-moyen);
  border: 1px solid transparent;
  line-height: 1.55;
}

.message.user {
  align-self: flex-end;
  background: var(--bulle-user-fond);
  color: var(--bulle-user-texte);
  border-color: var(--bulle-user-bord);
  border-bottom-right-radius: 2px;
}

.message.user .corps {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Message écrit par l'autre participant d'un fil partagé. Trois classes
   (0,3,0) contre deux pour `.message.user` (0,2,0) : cette règle gagne quel
   que soit l'ordre des déclarations. Dans une discussion solo, aucun message
   ne porte la classe et rien de tout ça ne s'applique. */
.message.user.autrui {
  background: var(--bulle-autrui-fond);
  color: var(--bulle-autrui-texte);
  border-color: var(--bulle-autrui-bord);
}

/* Même spécificité (0,3,0) que la règle ci-dessus : c'est l'ordre qui
   tranche, et celle-ci vient après, donc une bulle en erreur garde bien sa
   bordure rouge. Cas impossible aujourd'hui — seul l'assistant passe en
   erreur — mais la règle ne dépend pas de ça pour rester juste. */
.message.autrui.erreur {
  border-color: var(--danger);
}

.auteur {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.message.assistant {
  align-self: flex-start;
  background: var(--bulle-assistant-fond);
  color: var(--bulle-assistant-texte);
  border-color: var(--bulle-assistant-bord);
  border-bottom-left-radius: 2px;
}

.message.erreur {
  border-color: var(--danger);
}

.avis-erreur {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--danger-fond);
  color: var(--danger);
  font-size: 0.85rem;
}

/* Bouton « Réessayer » posé sous une réponse en erreur — le cas quotidien
   étant « limite d'usage atteinte » (spec §10). Une seule classe (0,1,0),
   mais rien d'autre dans la feuille ne vise un bouton du fil : `button`
   (0,0,1) est la seule règle en concurrence et elle perd. */
.reessayer {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--danger);
  border-radius: var(--rayon-petit);
  color: var(--danger);
  font-size: 0.8rem;
}

.reessayer:hover:not(:disabled) {
  background: var(--danger-fond);
}

.reessayer:disabled {
  cursor: default;
  opacity: 0.6;
}

/* --- Markdown rendu dans les reponses de l'assistant --- */

.corps > :first-child {
  margin-top: 0;
}

.corps > :last-child {
  margin-bottom: 0;
}

.corps h1,
.corps h2,
.corps h3,
.corps h4 {
  font-family: var(--font-affichage);
  font-weight: 400;
  line-height: 1.3;
  margin: 1.1em 0 0.4em;
}

.corps h1 {
  font-size: 1.4rem;
}

.corps h2 {
  font-size: 1.2rem;
}

.corps h3,
.corps h4 {
  font-size: 1.05rem;
}

.corps p,
.corps ul,
.corps ol,
.corps blockquote,
.corps table {
  margin: 0.6em 0;
}

.corps ul,
.corps ol {
  padding-left: 1.4em;
}

.corps li + li {
  margin-top: 0.25em;
}

.corps a {
  color: var(--accent-forte);
}

.corps blockquote {
  padding: 2px 14px;
  border-left: 3px solid var(--border-vif);
  color: var(--text-dim);
}

.corps hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1em 0;
}

.corps table {
  border-collapse: collapse;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.corps th,
.corps td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  text-align: left;
}

.corps img {
  max-width: 100%;
  border-radius: var(--rayon-petit);
}

.corps code {
  font-family: "SFMono-Regular", Consolas, "Cascadia Code", "Liberation Mono", Menlo, monospace;
  font-size: 0.87em;
  background: var(--surface);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.corps pre {
  position: relative;
  margin: 0.7em 0;
  padding: 32px 14px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  overflow-x: auto;
}

.corps pre code {
  background: none;
  padding: 0;
  font-size: 0.85em;
  line-height: 1.5;
  white-space: pre;
}

.corps pre::-webkit-scrollbar {
  height: 8px;
}

.corps pre::-webkit-scrollbar-thumb {
  background: var(--border-vif);
  border-radius: 999px;
}

.copier {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.6;
}

.copier:hover {
  border-color: var(--border-vif);
  color: var(--text);
}

#form-message {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}

#form-message[hidden] {
  display: none;
}

#champ-message {
  flex: 1 1 auto;
  resize: vertical;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text);
}

#champ-message:focus-visible {
  border-color: var(--accent);
}

#form-message button {
  flex: 0 0 auto;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--accent-encre);
  border: none;
  border-radius: var(--rayon-petit);
  font-weight: 600;
}

#form-message button:hover {
  background: var(--accent-forte);
}

/* --- Modale --- */

dialog#modale {
  padding: 24px;
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--rayon-moyen);
  max-width: min(480px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
}

dialog#modale.modale--large {
  max-width: min(720px, 92vw);
}

dialog#modale::backdrop {
  background: rgba(10, 11, 14, 0.6);
}

dialog#modale form[method="dialog"] {
  margin-top: 16px;
  text-align: right;
}

dialog#modale form[method="dialog"] button {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
}

dialog#modale form[method="dialog"] button:hover {
  border-color: var(--border-vif);
  color: var(--text);
}

/* --- Contenu des panneaux (partage, réglages, comptes, usage) --- */

#modale-contenu {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#modale-contenu > * {
  margin: 0;
}

#modale-contenu h3 {
  font-family: var(--font-affichage);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--text);
}

#modale-contenu h4 {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 4px;
}

.aide {
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* Formulaires : titre, réglages, nouveau compte partagent le même habillage
   que les champs de l'écran de connexion. */

#modale-contenu form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#modale-contenu form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

#modale-contenu input:not([type="checkbox"]),
#modale-contenu select,
#modale-contenu textarea {
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text);
}

#modale-contenu textarea {
  resize: vertical;
  font-family: var(--font-ui);
}

#modale-contenu input:focus-visible,
#modale-contenu select:focus-visible,
#modale-contenu textarea:focus-visible {
  border-color: var(--accent);
}

/* Champs réservés au propriétaire, vus par un invité : lisibles, visiblement
   inertes, mais pas délavés par le rendu par défaut du navigateur.
   `#modale-contenu select:disabled` = (1,1,1), contre (1,0,1) pour la règle
   d'habillage `#modale-contenu select` ci-dessus : celle-ci gagne. */
#modale-contenu select:disabled,
#modale-contenu textarea:disabled {
  opacity: 1;
  color: var(--text-dim);
  cursor: default;
}

#modale-contenu .ligne-case {
  flex-direction: row;
  align-items: center;
}

#modale-contenu button {
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text-dim);
  font-size: 0.85rem;
}

#modale-contenu button:hover {
  border-color: var(--border-vif);
  color: var(--text);
}

#modale-contenu form > button,
#modale-contenu .actions-reglages {
  align-self: flex-start;
}

#modale-contenu button[type="submit"] {
  background: var(--accent);
  color: var(--accent-encre);
  border: none;
  font-weight: 600;
}

#modale-contenu button[type="submit"]:hover {
  background: var(--accent-forte);
}

.actions-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* --- Lien d'invitation, affiche apres creation ou regeneration d'un compte --- */

#zone-lien {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#zone-lien > * {
  margin: 0;
}

#zone-lien[hidden] {
  display: none;
}

.ligne-lien {
  display: flex;
  gap: 8px;
}

#champ-lien {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Cascadia Code", "Liberation Mono", Menlo, monospace;
  font-size: 0.82rem;
}

#champ-lien:focus-visible {
  border-color: var(--accent);
}

#btn-copier-lien {
  flex: 0 0 auto;
}

#modale-contenu .danger {
  color: var(--danger);
  border-color: var(--danger);
}

#modale-contenu .danger:hover {
  background: var(--danger-fond);
  border-color: var(--danger);
  color: var(--danger);
}

/* --- Liste des membres (partage) --- */

#liste-membres {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#liste-membres li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-petit);
}

/* --- Tables (usage, comptes) --- */

#modale-contenu table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.88rem;
}

#modale-contenu th,
#modale-contenu td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

#modale-contenu th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.78rem;
}

#modale-contenu tr:last-child td {
  border-bottom: none;
}

/* --- Graphique d'usage : colonnes CSS, pas de bibliothèque --- */

.total-usage {
  font-size: 0.95rem;
  color: var(--text-dim);
}

.total-usage strong {
  font-family: var(--font-affichage);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--text);
}

.graphique-cadre {
  padding: 16px 14px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon-moyen);
}

.graphique {
  /* Pas de overflow-x ici : en CSS, donner overflow-x sans mettre
     overflow-y à 'auto' force aussi l'axe vertical à se découper, ce qui
     rognerait l'infobulle des barres les plus hautes (celles qui intéressent
     le plus). Les barres rétrécissent plutôt jusqu'à leur largeur minimale ;
     au-delà, la modale elle-même défile horizontalement. */
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.barre {
  position: relative;
  flex: 1 1 0;
  min-width: 6px;
  max-width: 22px;
  min-height: 3px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
}

.barre:hover,
.barre:focus-visible {
  background: var(--accent-forte);
}

.barre.barre--pic {
  background: var(--accent-forte);
}

.barre::after {
  content: attr(data-etiquette);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-vif);
  border-radius: var(--rayon-petit);
  color: var(--text);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  z-index: 3;
}

.barre:hover::after,
.barre:focus-visible::after {
  opacity: 1;
}

.graphique-axe {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.pic-graphique {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.pic-graphique strong {
  color: var(--text);
  font-weight: 600;
}

/* --- Defilement (Webkit/Blink) --- */

#liste-discussions::-webkit-scrollbar,
#fil::-webkit-scrollbar {
  width: 10px;
}

#liste-discussions::-webkit-scrollbar-thumb,
#fil::-webkit-scrollbar-thumb {
  background: var(--border-vif);
  border-radius: 999px;
}

/* --- Sous 700 px : la coquille passe en une seule colonne pleine largeur --- */

@media (max-width: 700px) {
  #ecran-principal {
    flex-direction: column;
  }

  #barre-laterale {
    flex: 0 0 auto;
    width: 100%;
    max-height: 45vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  #zone-principale {
    flex: 1 1 auto;
    min-height: 0;
  }

  .message {
    max-width: 85%;
  }

  #entete-discussion,
  .entete-laterale,
  #fil,
  #form-message {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}