/* Playground-style "Thinking" panel for the agentic Astra docs chat. Tokens
   mirror astra-docs-chat.css so it sits naturally inside an assistant bubble. */

.astra-think-wrap {
  margin-bottom: 0.5rem;
}

.astra-think {
  border: 1px solid var(--color-border, rgb(232 236 240 / 16%));
  border-radius: 8px;
  background: var(--color-bg-elevated, #1a2030);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.85rem;
  overflow: hidden;
}

.astra-think__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  color: var(--color-text-muted, rgb(232 236 240 / 68%));
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}

.astra-think__summary::-webkit-details-marker {
  display: none;
}

.astra-think__summary:hover {
  color: var(--color-text, #e8ecf0);
}

.astra-think__brain {
  font-size: 0.9rem;
}

.astra-think__list {
  margin: 0;
  padding: 0.1rem 0.7rem 0.5rem;
  list-style: none;
  border-top: 1px solid var(--color-border, rgb(232 236 240 / 12%));
}

.astra-think__item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.28rem 0;
  color: var(--color-text-muted, rgb(232 236 240 / 72%));
  line-height: 1.45;
}

.astra-think__item--done {
  color: var(--color-text, #e8ecf0);
}

.astra-think__mark {
  color: var(--color-accent, #5eb8c8);
  font-weight: 700;
}

.astra-think__q {
  color: var(--color-accent, #5eb8c8);
  font-style: italic;
}

/* Small spinning ring shown while a step is running. */
.astra-think__spin {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  border: 2px solid var(--color-accent-muted, rgb(94 184 200 / 35%));
  border-top-color: var(--color-accent, #5eb8c8);
  border-radius: 50%;
  animation: astra-think-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .astra-think__spin {
    animation: none;
  }
}