.chat-thread__messages {
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-section);
}

.chat-thread__message {
  display: grid;
  gap: var(--space-card-stack);
  min-inline-size: 0;
}

.chat-thread__message--user {
  justify-self: end;
  max-inline-size: min(80%, 36rem);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-xs);
  background: var(--color-navy);
  color: var(--color-text-on-accent);
}

.chat-thread__message--answer {
  padding: var(--space-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.chat-thread__text {
  font-size: var(--text-md);
  line-height: 1.7;
  white-space: pre-wrap;
}

.chat-thread__pending {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
}

.chat-thread__dot {
  flex: none;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: chat-breathe 1.2s ease-in-out infinite;
}

.chat-thread__phase {
  background: linear-gradient(90deg, var(--color-text-subtle) 0%, var(--color-text) 50%, var(--color-text-subtle) 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: chat-shimmer 1.8s linear infinite;
}

@keyframes chat-breathe {
  0%, 100% { opacity: 0.35; scale: 0.8; }
  50% { opacity: 1; scale: 1.15; }
}

@keyframes chat-shimmer {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

@media (max-width: 768px) {
  .chat-thread__message--user {
    max-inline-size: 88%;
  }
}

.chat-thread__answer {
  min-inline-size: 0;
}

.chat-thread__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.chat-thread__copied {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}