/* OpenMaus — finitions et mouvement façon Grok Bot, par-dessus le « mode simple » d'OpenMausBot.
   Toutes les valeurs viennent de l'app Grok Bot installée (thème « Sand Dark », lecture seule) :
   détail et mesures dans REVUE-ANIMATIONS.md. Les animations pilotées (historique, envoi,
   indicateur de réflexion, zone de saisie, liste des bots) sont dans omb-motion.js.
   Injecté par patches/patchlook.py dans dist/index.html.

   Courbes de Grok :
     rise    cubic-bezier(.23,1,.32,1)   arrivée des messages
     glyph   cubic-bezier(.22,1,.36,1)   boutons, pastilles, indicateur
     sharp   cubic-bezier(.165,.84,.44,1) menus, fenêtres
     decel   cubic-bezier(.2,0,0,1)      bouton « revenir en bas »
     toast   cubic-bezier(.16,1,.3,1)    notifications
*/

/* ---------- Bulles ---------- */

/* Réponses du bot : léger reflet en haut + contour très fin (Grok : reflet 3 %, bordure 4 %). */
[data-skin="midnight"]
  [role="log"][data-simple-rows]
  .bg-card[class*="rounded-[18px]"] {
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0.03),
    transparent
  );
  box-shadow:
    inset 0 0.5px 0 rgb(255 255 255 / 0.03),
    inset 0 -0.5px 0 rgb(255 255 255 / 0.03),
    inset 0 0 0 0.5px rgb(245 245 245 / 0.04);
}

/* ---------- Arrivée des messages ---------- */

/* Grok : la nouvelle ligne monte de 12 px en 0,24 s, sans fondu. Même mouvement pour tes messages
   (animate-msg-in), pour les réponses du bot (turn-answer, qui faisait un zoom de 0,48 s)
   et pour les autres nouvelles lignes (data-omb-enter, posé par omb-motion.js). */
:root {
  --animate-msg-in: omb-grok-in 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
[role="log"] .turn-answer {
  transform-origin: 50% 50%;
  animation: omb-grok-in 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
[data-omb-enter] > * {
  animation: omb-grok-in 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes omb-grok-in {
  from {
    transform: translateY(12px);
  }
}

/* ---------- Indicateur « en train de réfléchir » ---------- */

/* La mascotte apparaît avec le petit rebond du disque de Grok (60 % → 100 %, 0,34 s). */
[role="log"] .turn-mascot-in {
  animation: omb-disc-pop 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes omb-disc-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
/* Quand la réponse arrive, l'app « rentre » l'indicateur de 12 px sous la bulle (marge -mt-3)
   d'un coup, ce qui faisait reculer la conversation de 12 px : on rend ce changement progressif. */
[role="log"] > .turn-presence {
  transition: margin-top 0.24s cubic-bezier(0.23, 1, 0.32, 1);
}
/* La phrase monte de 4 px après 0,22 s, et chaque nouvelle phrase rejoue ce mouvement.
   Reflet qui défile : 2,2 s en 60 pas, comme Grok (moins de travail pour le téléphone). */
:root {
  --animate-shimmer: shimmer 2.2s steps(60, end) infinite;
}
.thinking-shimmer {
  animation:
    var(--animate-shimmer),
    omb-label-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) 0.22s backwards;
}
@keyframes omb-label-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------- Barre d'actions d'un message ---------- */

/* Grok l'affiche instantanément au survol (OpenMausBot : fondu de 0,15 s). */
[data-testid="message-actions"] {
  transition: none;
}

/* ---------- Bouton « revenir en bas » ---------- */

/* Grok : monte de 6 px en fondu, 0,15 s (la sortie est jouée par omb-motion.js). */
.chat-column-dock button[class*="left-1/2"].animate-pop-in {
  animation: omb-jump-in 0.15s cubic-bezier(0.2, 0, 0, 1) backwards;
}
@keyframes omb-jump-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ---------- Zone de saisie ---------- */

/* Boutons envoyer / micro / appel / stop : ils grossissent depuis la moitié de leur taille
   en fondu (Grok : 0,2 s), au lieu de surgir. */
[data-tour="composer"] [data-composer-actions] > * {
  animation: omb-glyph-in 0.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes omb-glyph-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
/* Appui : les boutons ronds rétrécissent à 98 % (Grok, ui-press-scale). */
[data-tour="composer"] button:not(:disabled):active {
  scale: 0.98;
}

/* ---------- Liste des bots ---------- */

/* Grok change le fond au survol et à la sélection instantanément (OpenMausBot : 0,15 s). */
aside[data-sidebar] [data-sidebar-bot-row],
aside[data-sidebar] [data-sidebar-thread-row] {
  transition-duration: 0s;
}
/* Pastille « non lu » : fondu de 0,13 s à l'apparition. */
[data-testid="unread-dot"] {
  animation: omb-fade-in 0.13s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* ---------- Menus, fenêtres, notifications ---------- */

/* Menus : Grok fait apparaître en 0,1 s depuis 98 % avec 2 px de décalage (OpenMausBot : 0,2 s). */
:root {
  --animate-pop-in: omb-menu-in 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  --animate-pop-out: omb-menu-out 0.1s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
@keyframes omb-menu-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
  }
}
@keyframes omb-menu-out {
  to {
    opacity: 0;
    transform: translateY(2px) scale(0.98);
  }
}
/* Fenêtres : 0,2 s depuis 97 %. */
.ui-modal.animate-pop-in,
.glass-popup.animate-pop-in,
[role="dialog"][aria-modal="true"].animate-pop-in {
  animation: omb-dialog-in 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
}
@keyframes omb-dialog-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
/* Fond sombre derrière les fenêtres : fondu de 0,2 s au lieu d'un noir instantané. */
div.fixed.inset-0[class*="bg-black/"] {
  animation: omb-fade-in 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
}
/* Notifications : montent de 4 px depuis 98 %, 0,18 s. */
[data-notice-toast],
[data-access-toast] {
  animation: omb-toast-in 0.18s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes omb-toast-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
}
/* Étapes et outils dépliés : le contenu apparaît en fondu (Grok : 0,2 s, 1 px). */
[role="log"] details[open] > :not(summary) {
  animation: omb-drop-in 0.2s cubic-bezier(0.165, 0.84, 0.44, 1) backwards;
}
@keyframes omb-drop-in {
  from {
    opacity: 0;
    transform: translateY(-1px);
  }
}

@keyframes omb-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Animations réduites (réglage du téléphone / de l'ordinateur) ---------- */
/* OpenMausBot coupe déjà toutes les animations dans ce cas ; on remet juste nos valeurs à zéro. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --animate-msg-in: none;
  }
  [role="log"] .turn-answer,
  [data-omb-enter] > *,
  [role="log"] .turn-mascot-in,
  .thinking-shimmer,
  .chat-column-dock button[class*="left-1/2"].animate-pop-in,
  [data-tour="composer"] [data-composer-actions] > *,
  [data-testid="unread-dot"],
  .ui-modal.animate-pop-in,
  .glass-popup.animate-pop-in,
  [role="dialog"][aria-modal="true"].animate-pop-in,
  div.fixed.inset-0[class*="bg-black/"],
  [data-notice-toast],
  [data-access-toast],
  [role="log"] details[open] > :not(summary) {
    animation: none;
  }
  [data-tour="composer"] button:not(:disabled):active {
    scale: none;
  }
  [role="log"] > .turn-presence {
    transition: none;
  }
}