/*
 * 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.
 */

/* Home hero wash. The canvas paints the colors; this only places it. */
.marketing-bar {
  position: relative;
  z-index: 2;
}

.color-field-host {
  position: relative;
  z-index: 0;
}

.color-field {
  position: absolute;
  z-index: -1;
  top: -12%;
  left: -8%;
  width: 116%;
  height: 124%;
  pointer-events: none;
  filter: blur(46px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

#messages {
  overflow-anchor: none;
  /* Keep the header, title, and composer on screen in a short window. */
  max-height: min(60vh, calc(100dvh - 24rem));
}

.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: #0071e3;
  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;
  }
}