/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

#messages {
  overflow-anchor: none;
  max-height: min(60vh, calc(100dvh - 18rem));
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.35rem;
  margin: 0;
}

.typing-indicator span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #3d5c4a;
  animation: typing-dot 1s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.16s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes typing-dot {
  0%, 70%, 100% {
    transform: translateY(0) scale(0.75);
    opacity: 0.3;
  }

  35% {
    transform: translateY(-0.4rem) scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing-indicator span {
    animation-name: typing-dot-fade;
  }
}

@keyframes typing-dot-fade {
  0%, 100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}