:root {
  /* TODO: Centralize variables in a single document */

  --gray-250: #98979E;
  --ai-login-linear-gradient: linear-gradient(90deg, #32303E 0%, #847FA4 230.7%);
  --background-color-progress-bar-gradient-bg: #43428C;
  --background-color-progress-bar-gradient-highlight: #D5D5FF;
  --background-color-progress-bar-track-bg: #D5D5FF;
  --background-color-progress-bar-track-highlight: #E8E8FF;
}

.theme-lawinsider {
  --background-color-progress-bar-gradient-bg: #98979E;
  --background-color-progress-bar-gradient-highlight: #EBEAEC;
  --background-color-progress-bar-track-bg: var(--background-color-progress-bar-gradient-bg);
  --background-color-progress-bar-track-highlight: var(--background-color-progress-bar-gradient-highlight);
}

.bg-ai-gradient {
  background: var(--ai-linear-gradient);
  transition: color 300ms, background 300ms;
}

.simple-ai-primary-btn:disabled {
  background: var(--gray-3);
  color: var(--gray-250);
  cursor: auto;
}

.ai-login-bg {
  background: url("/assets/waves-pattern-dac59304.svg"), var(--ai-login-linear-gradient), no-repeat, center;
  background-size: cover;
}

.ai-loader:first-child {
  background: linear-gradient(
    90deg,
    var(--loader-highlight-color) 25%,
    var(--loader-background-color) 50%,
    var(--loader-highlight-color) 75%
  );
}

.ai-loader:last-child {
  background: linear-gradient(
    90deg,
    var(--loader-background-color) 25%,
    var(--loader-highlight-color) 50%,
    var(--loader-background-color) 75%
  );
}

.ai-loader:first-child,
.ai-loader:last-child {
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon:first-child {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-bg) 0%,
    var(--background-color-progress-bar-gradient-highlight) 100%
  );
}

.loading-icon:first-child {
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon-light {
  background: linear-gradient(90deg, #A5A5FF 0%, #EDEDFF 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.loading-icon-chat-first {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-bg) 0%,
    var(--background-color-progress-bar-gradient-highlight) 100%
  );
  background-size: 200% 100%;
  animation: loading-chat 3000ms infinite ease-in-out;
}

.loading-icon-chat-second {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-highlight) 0%,
    var(--background-color-progress-bar-gradient-bg) 100%
  );
  background-size: 200% 100%;
  animation: loading-chat 3000ms infinite ease-in-out;
  animation-delay: 300ms;
}

.progress-bar-shimmer {
  background: linear-gradient(90deg, #5655B5 0%, #7B7AE0 50%, #5655B5 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

.progress-bar-loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--background-color-progress-bar-gradient-bg) 0%,
    var(--background-color-progress-bar-gradient-highlight) 50%,
    var(--background-color-progress-bar-gradient-bg) 100%
  );
  background-size: 200% 100%;
  animation: progress-bar-loading 3000ms linear infinite;
}

.progress-bar-track-shimmer {
  background: linear-gradient(90deg, var(--background-color-progress-bar-track-bg) 0%, var(--background-color-progress-bar-track-highlight) 50%, var(--background-color-progress-bar-track-bg) 100%);
  background-size: 200% 100%;
  animation: loading 2000ms infinite ease-in-out;
}

@keyframes loading-chat {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loading {
  0% {
      background-position: 200% 0;
  }

  100% {
      background-position: -200% 0;
  }
}

@keyframes progress-bar-loading {
  0% { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}

/* Keep quick deferred card loads quiet; show a status only for longer waits. */
.review-details-loading {
  animation: review-details-loading-reveal 600ms step-end;
}

@keyframes review-details-loading-reveal {
  from { visibility: hidden; }
  to { visibility: visible; }
}