﻿.thinking-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 30px;
}

.core-loader {
  position: relative;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-center {
  width: 18px;
  height: 18px;
  background-color: #0d6efd;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(13, 110, 253, 0.6);
  animation: pulse-core 1.8s ease-in-out infinite;
}

.modal-xs {
  max-width: 260px;
}

.ring-inner {
  position: absolute;
  width: 45px;
  height: 45px;
  border: 2px solid transparent;
  border-top: 2px solid #0d6efd;
  border-bottom: 2px solid #0d6efd;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-radius: 50%;
  animation: rotate-cw 2.5s linear infinite;
}

.ring-outer {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 1px dashed rgba(13, 110, 253, 0.35);
  border-radius: 50%;
  animation: rotate-ccw 6s linear infinite, expand-ring 2s ease-in-out infinite;
}

.thinking-text {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  letter-spacing: 0.5px;
}

.dots::after {
  content: '';
  animation: dots-animation 1.5s infinite steps(4);
}

@keyframes pulse-core {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 25px rgba(13, 110, 253, 0.8);
  }
}

@keyframes rotate-cw {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-ccw {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes expand-ring {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.95) rotate(0deg);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05) rotate(-180deg);
  }
}

@keyframes dots-animation {
  0% {
    content: '';
  }

  25% {
    content: '.';
  }

  50% {
    content: '..';
  }

  75% {
    content: '...';
  }
}
