/* ChatMenu — microanimaciones reutilizables */

@keyframes cm-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cm-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes cm-bounce-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(16px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes cm-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes cm-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 54, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(255, 90, 54, 0); }
}

@keyframes cm-shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes cm-spin {
  to { transform: rotate(360deg); }
}

.cm-anim-fade-in-up { animation: cm-fade-in-up var(--duration-base) var(--ease-out) both; }
.cm-anim-pop { animation: cm-pop var(--duration-base) var(--ease-spring) both; }
.cm-anim-bounce-in { animation: cm-bounce-in var(--duration-slow) var(--ease-spring) both; }
.cm-anim-sheet-up { animation: cm-sheet-up var(--duration-slow) var(--ease-out) both; }

.cm-skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-border) 37%, var(--color-surface-2) 63%);
  background-size: 400% 100%;
  animation: cm-shimmer 1.4s ease infinite;
  border-radius: var(--radius-md);
}

.cm-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: cm-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}