.message-list {
  display: block;
  height: 100%;
  min-height: 0;
  padding: 0;
  background-color: var(--color-bg);
  box-sizing: border-box;
}

.message-list__content {
  min-height: 100%;
  padding: var(--space-2) 0 var(--space-3);
  background-color: var(--color-bg);
  box-sizing: border-box;
}

.message-item {
  padding: 0 28rpx;
}

.message-item--group-start {
  margin-top: 24rpx;
}

.system-message {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 6rpx 0;
  text-align: center;
}

.system-message__time,
.system-message__content {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-muted-fg);
}

.system-message__time {
  white-space: nowrap;
}

.message-list__unread-divider {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin: 64rpx 28rpx 16rpx;
}

.message-list__unread-divider-line {
  height: 1rpx;
  flex: 1;
  background: var(--color-primary);
  opacity: 0.4;
}

.message-list__unread-divider-label {
  color: var(--color-primary);
  font-size: 22rpx;
  font-weight: 600;
}

.message-item__group-bottom-anchor {
  height: 1rpx;
}

.message-skeleton-list {
  padding: 0 28rpx var(--space-3);
  box-sizing: border-box;
}

.message-skeleton {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 6rpx 0;
  margin-bottom: 18rpx;
}

.message-skeleton__avatar {
  width: 56rpx;
  height: 56rpx;
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  flex-shrink: 0;
}

.message-skeleton__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  padding-top: 6rpx;
}

.message-skeleton__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12rpx;
}

.message-skeleton__author {
  height: 24rpx;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
}

.message-skeleton__time {
  width: 76rpx;
  height: 20rpx;
  border-radius: var(--radius-sm);
  background: var(--color-border-subtle);
}

.message-skeleton__line {
  height: 26rpx;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
}

.message-skeleton__line--short {
  background: var(--color-border-subtle);
}

.loading,
.error,
.empty {
  padding: var(--space-3) 28rpx;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted-fg);
}

.error {
  color: var(--color-destructive);
}

@keyframes message-list-shimmer {
  0% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
  }
}

.message-skeleton__avatar,
.message-skeleton__author,
.message-skeleton__time,
.message-skeleton__line {
  animation: message-list-shimmer 1.2s ease-in-out infinite;
}

/* Inline "agent working" footer rendered beneath the last message when one or
 * more agents are active in this scope. An empty lead preserves the avatar
 * column while the dots and label stay together in the message content column. */
.agent-working-indicator {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8rpx 28rpx 12rpx;
}

.agent-working-indicator__lead {
  width: 56rpx;
  flex: 0 0 auto;
  margin-right: var(--space-2);
}

.agent-working-indicator__body {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12rpx;
  min-height: 40rpx;
}

.agent-working-indicator__dots {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
}

.agent-working-indicator__dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: var(--color-muted-fg);
  opacity: 0.55;
  animation: agent-working-indicator-breath 1.4s ease-in-out infinite;
}

.agent-working-indicator__dot--2 {
  animation-delay: 0.18s;
}

.agent-working-indicator__dot--3 {
  animation-delay: 0.36s;
}

.agent-working-indicator__label {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: 40rpx;
  color: var(--color-muted-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes agent-working-indicator-breath {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}