/* 062D: Xiaobei thinking animation migrated from AI prep workbench V2. */
.chat-stream .msg.is-thinking {
  align-items: start !important;
}

.chat-stream .msg.is-thinking .bubble {
  width: min(360px, 100%) !important;
  padding: 11px 12px !important;
}

.wb-thinking {
  min-width: min(300px, 100%);
}

.wb-thinking-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0b6b64;
}

.wb-thinking-head span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff 0 20%, #47cfc5 42%, #7963a4 86%);
  box-shadow: 0 0 0 0 rgba(25, 171, 161, .25);
  animation: wbThinkingOrb 1.45s ease-in-out infinite;
}

.wb-thinking-head strong {
  color: #0b6b64;
  font-size: 13px;
  font-weight: 900;
}

.wb-thinking p {
  margin: 6px 0 0;
  color: #607b77;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.wb-thinking-track {
  position: relative;
  height: 6px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8f7f3, #fbf1dd);
}

.wb-thinking-track i {
  position: absolute;
  inset: 0 auto 0 -44%;
  width: 46%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(24, 167, 170, .32), rgba(184, 138, 58, .38), transparent);
  animation: wbThinkingSweep 1.55s cubic-bezier(.42, 0, .2, 1) infinite;
}

.wb-thinking-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.wb-thinking-steps em {
  padding: 3px 7px;
  border-radius: 999px;
  background: #f2faf7;
  color: #66837f;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  animation: wbThinkingStep 1.8s ease-in-out infinite;
}

.wb-thinking-steps em:nth-child(2) {
  animation-delay: .22s;
}

.wb-thinking-steps em:nth-child(3) {
  animation-delay: .44s;
}

@keyframes wbThinkingOrb {
  0%, 100% {
    transform: scale(.92);
    box-shadow: 0 0 0 0 rgba(25, 171, 161, .24);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(25, 171, 161, 0);
  }
}

@keyframes wbThinkingSweep {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(315%);
  }
}

@keyframes wbThinkingStep {
  0%, 78%, 100% {
    opacity: .5;
    transform: translateY(0);
  }

  34% {
    opacity: 1;
    transform: translateY(-1px);
  }
}