/* L'icona che pensa (components/_thinking), presa da Marina in Del Mar (thinking.css):
   anello esterno blu, interno oro come il logo di Amelia3, nucleo che pulsa. */
.thinking-core {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
}

.thinking-core::before,
.thinking-core::after,
.thinking-ring {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 50%;
}

.thinking-core::before {
  border-top-color: var(--app-accent);
  border-right-color: var(--app-accent);
  animation: thinking-spin 1.1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

.thinking-core::after {
  inset: 0.35rem;
  border-bottom-color: #b8892d;
  border-left-color: #b8892d;
  opacity: 0.85;
  animation: thinking-spin 1.7s cubic-bezier(0.4, 0.2, 0.5, 0.8) infinite reverse;
}

.thinking-ring {
  inset: 0.7rem;
  border-top-color: #7da0ff;
  animation: thinking-spin 0.8s linear infinite;
}

.thinking-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.3rem;
  height: 0.3rem;
  margin: -0.15rem 0 0 -0.15rem;
  border-radius: 50%;
  background: var(--app-accent);
  animation: thinking-pulse 1.4s ease-in-out infinite;
}

@keyframes thinking-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes thinking-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.4;
  }

  50% {
    transform: scale(2.2);
    opacity: 1;
  }
}

/* L'icona con la sua frase: «Amèlie sta analizzando…», «Sto cercando il prodotto…» */
.thinking-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--app-muted);
}