/**
 * @file
 * Shared Smart Answers presentation for SearchStax result pages.
 *
 * These styles are intentionally app-agnostic so the same deferred answer
 * component can be inserted above site, FAD, and Locations results.
 */

.smart-answer-deferred {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.smart-answer-deferred.is-visible {
  display: block;
  opacity: 1;
  transform: none;
}

.smart-answer-card {
  background: #f8cdc50d;
  border: 0.5px solid rgb(214 50 3 / 38%);
  border-radius: 11px !important;
}

.smart-answer-card--loading {
  background: #ffffff;
  border: 0.5px solid rgb(255, 255, 255);
}

.smart-answer-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.smart-answer-card__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.smart-answer-card__body {
  min-height: 1.5em;
}

.smart-answer-card__body a {
  text-decoration: underline;
}

.smart-answer-card__loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.5em;
  color: rgba(0, 0, 0, 0.78);
}

.smart-answer-card__loading-text {
  white-space: nowrap;
}

.smart-answer-card__loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 10px;
}

.smart-answer-card__loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d63202;
  opacity: 0.3;
  animation: smart-answer-dot-pulse 1.2s ease-in-out infinite;
}

.smart-answer-card__loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.smart-answer-card__loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.smart-answer-deferred__skeleton {
  background: #f7f7f7;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.smart-answer-deferred__line {
  display: block;
  height: 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8e8e8 0%, #f4f4f4 50%, #e8e8e8 100%);
  background-size: 200% 100%;
  animation: smart-answer-shimmer 1.4s linear infinite;
}

.smart-answer-deferred__line:last-child {
  margin-bottom: 0;
}

.smart-answer-deferred__line--short {
  width: 62%;
}

@keyframes smart-answer-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes smart-answer-dot-pulse {
  0%, 80%, 100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px);
  }
}