.ai-thinking,
.transcription-thinking {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  color: var(--ink-soft, #556173);
  font-size: .875rem;
  line-height: 1.4;
}

/* Shared Al-Beruni reply mark colors. */
.ai-thinking,
.ai-response {
  --ai-thinking-blue: #244f8a;
  --ai-thinking-accent: #8fb9e8;
}

.ai-thinking {
  gap: 10px;
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 30px;
}

.ai-response {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ai-response-content { min-width: 0; flex: 1; }

.ai-thinking-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.ai-thinking-ray {
  position: absolute;
  top: 2px;
  left: 12px;
  width: 2px;
  height: 7px;
  border-radius: 2px;
  background: var(--ai-thinking-blue);
  transform-origin: 1px 11px;
  opacity: .42;
  animation: ai-thinking-ray-light 1.55s ease-in-out infinite;
}
.ai-thinking-ray:nth-child(2) { transform: rotate(45deg); animation-delay: .19s; }
.ai-thinking-ray:nth-child(3) { transform: rotate(90deg); animation-delay: .38s; }
.ai-thinking-ray:nth-child(4) { transform: rotate(135deg); animation-delay: .57s; }
.ai-thinking-ray:nth-child(5) { transform: rotate(180deg); animation-delay: .76s; }
.ai-thinking-ray:nth-child(6) { transform: rotate(225deg); animation-delay: .95s; }
.ai-thinking-ray:nth-child(7) { transform: rotate(270deg); animation-delay: 1.14s; }
.ai-thinking-ray:nth-child(8) { transform: rotate(315deg); animation-delay: 1.33s; }
.ai-thinking-core {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-thinking-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ai-thinking-accent) 45%, transparent);
  animation: ai-thinking-core-breathe 2.1s ease-in-out infinite;
}

.ai-thinking-mark-static .ai-thinking-ray { animation: none; opacity: .62; }
.ai-thinking-mark-static .ai-thinking-core { animation: none; }

.ai-thinking-label {
  color: var(--ink-soft, #556173);
  font-size: 13px;
  letter-spacing: .005em;
}

@keyframes ai-thinking-ray-light {
  0%, 100% { opacity: .34; scale: .82; }
  42% { opacity: .58; scale: 1; }
  56% { opacity: 1; scale: 1.12; background: var(--ai-thinking-accent); }
}

@keyframes ai-thinking-core-breathe {
  0%, 100% { scale: .9; }
  50% { scale: 1.13; box-shadow: 0 0 9px color-mix(in srgb, var(--ai-thinking-accent) 60%, transparent); }
}

/* Preserve the existing teacher transcription state; it is not a reply. */
.transcription-thinking { --transcription-primary: var(--student-title-color, #183b77); }
.transcription-thinking-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}
.transcription-thinking-mark i {
  position: absolute;
  top: 2px;
  left: 10px;
  width: 4px;
  height: 8px;
  border-radius: 3px 3px 2px 2px;
  background: var(--transcription-primary);
  opacity: .3;
  transform: rotate(var(--ray-angle)) translateY(0);
  transform-origin: 2px 10px;
  animation: transcription-pulse 1.2s ease-in-out infinite;
  animation-delay: var(--ray-delay);
}
.transcription-thinking-mark i:nth-child(1) { --ray-angle: 0deg; --ray-delay: 0ms; }
.transcription-thinking-mark i:nth-child(2) { --ray-angle: 45deg; --ray-delay: -150ms; }
.transcription-thinking-mark i:nth-child(3) { --ray-angle: 90deg; --ray-delay: -300ms; }
.transcription-thinking-mark i:nth-child(4) { --ray-angle: 135deg; --ray-delay: -450ms; }
.transcription-thinking-mark i:nth-child(5) { --ray-angle: 180deg; --ray-delay: -600ms; }
.transcription-thinking-mark i:nth-child(6) { --ray-angle: 225deg; --ray-delay: -750ms; }
.transcription-thinking-mark i:nth-child(7) { --ray-angle: 270deg; --ray-delay: -900ms; }
.transcription-thinking-mark i:nth-child(8) { --ray-angle: 315deg; --ray-delay: -1050ms; }
.transcription-thinking-mark b {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--transcription-primary) 34%, var(--surface, #fff));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--transcription-primary) 20%, transparent);
}

@keyframes transcription-pulse {
  0%, 100% { opacity: .34; transform: rotate(var(--ray-angle)) translateY(0) scale(.88); }
  48% { opacity: 1; transform: rotate(var(--ray-angle)) translateY(-1px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-thinking-ray { animation: none; opacity: .75; }
  .ai-thinking-core { animation: none; }
  .transcription-thinking-mark i { animation: none; opacity: .76; }
}