.thinking-indicator {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 10px 0 6px;
  font-family: var(--app-sans);
  line-height: 1.5;
  animation: thinking-arrive 320ms ease-out both;
}

.thinking-orbit {
  position: relative;
  flex: 0 0 42px;
  height: 42px;
  margin-top: 15px;
  color: var(--accent);
}

.thinking-orbit-ring,
.thinking-orbit-inner,
.thinking-orbit-core {
  position: absolute;
  border-radius: 50%;
}

.thinking-orbit-ring {
  inset: 0;
  border: 1px solid #c79a4b30;
  border-top-color: var(--accent);
  animation: thinking-orbit 3.2s linear infinite;
}

.thinking-orbit-ring::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ead5aa;
  box-shadow: 0 0 8px #c79a4b90;
}

.thinking-orbit-inner {
  inset: 7px;
  border: 1px solid transparent;
  border-bottom-color: #c79a4b90;
  border-left-color: #c79a4b30;
  animation: thinking-orbit 4.8s linear infinite reverse;
}

.thinking-orbit-core {
  inset: 17px;
  background: #ddbb7a;
  box-shadow: 0 0 12px #c79a4b60;
  animation: thinking-breathe 2.4s ease-in-out infinite;
}

.thinking-body {
  flex: 1;
  min-width: 0;
}

.thinking-meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.thinking-elapsed {
  font-size: 0.69rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-transform: none;
}

.thinking-title {
  color: #e5c991;
  font-size: 1rem;
  font-weight: 500;
}

.thinking-detail {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.thinking-trail {
  min-height: 1.5em;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.69rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

@keyframes thinking-breathe {
  0%, 100% { transform: scale(0.8); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 1; }
}

@keyframes thinking-arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .thinking-indicator { gap: 13px; }
  .thinking-orbit { flex-basis: 36px; height: 36px; }
  .thinking-orbit-core { inset: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-indicator,
  .thinking-orbit-ring,
  .thinking-orbit-inner,
  .thinking-orbit-core { animation: none; }
}
