@import "/styles/icons.wxss";

.message-bubble {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8rpx 0;
}

.message-bubble.recalled {
  opacity: 0.55;
}

.message-bubble.is-pending {
  opacity: 0.55;
}

.message-bubble.is-failed {
  opacity: 0.85;
}

.message-bubble--threaded {
  cursor: pointer;
}

.avatar {
  flex: 0 0 auto;
  width: 56rpx;
  height: 56rpx;
  margin-right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar--placeholder {
  visibility: hidden;
}

.avatar-img {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: var(--color-bg);
}

.avatar-initials {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: var(--color-avatar-human);
  color: var(--color-avatar-fg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials--agent {
  background-color: var(--color-avatar-agent);
}

.avatar-initials--service {
  background-color: var(--color-avatar-service);
}

.avatar-initials--schedule {
  background-color: var(--color-primary);
  color: var(--color-primary-fg, #fff);
}

.avatar-initials--workflow {
  background-color: var(--color-avatar-human);
  color: #fff;
}

.automation-avatar-icon {
  width: 34rpx;
  height: 34rpx;
}

.body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 4rpx;
}

.header--continued {
  margin-bottom: 2rpx;
}

.author {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-fg);
  margin-right: 12rpx;
}

.author--schedule {
  color: var(--color-primary);
}

.source-attribution {
  display: inline-flex;
  align-items: flex-start;
  gap: 12rpx;
  align-self: flex-start;
  margin-top: 12rpx;
  max-width: 100%;
  min-height: 32rpx;
  color: inherit;
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 32rpx;
  text-align: left;
}

.source-attribution__icon {
  flex-shrink: 0;
  margin-top: 4rpx;
}

.source-attribution__content {
  display: inline-flex;
  align-items: flex-start;
  gap: 4rpx;
  min-width: 0;
}

.source-attribution__text {
  min-width: 0;
  color: var(--color-muted-fg);
  line-height: 32rpx;
  overflow-wrap: anywhere;
}

.source-attribution .icon--send {
  background-color: var(--color-muted-fg);
}

.source-attribution__chevron {
  flex-shrink: 0;
  background-color: var(--color-muted-fg);
  transform: rotate(-90deg);
  transition: transform 120ms ease;
}

.source-attribution__chevron--expanded {
  transform: rotate(0deg);
}

.source-attribution-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8rpx 16rpx;
  margin-top: 12rpx;
  padding-left: 24rpx;
  border-left: 2rpx solid var(--color-border);
  font-size: var(--text-xs);
  line-height: 32rpx;
  color: var(--color-muted-fg);
}

.source-attribution-details__value {
  min-width: 0;
  color: var(--color-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}

.time {
  font-size: var(--text-sm);
  color: #b2b2b2;
}

.content {
  font-size: var(--text-base);
  color: var(--color-fg);
  line-height: 1.58;
  overflow-wrap: anywhere;
}

.content--recalled {
  font-style: italic;
  color: var(--color-muted-fg);
}

.attachments {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.attachment-thumb {
  width: 180rpx;
  height: 180rpx;
  border-radius: var(--radius-md);
  background-color: var(--color-muted, #f1f2f4);
}

.attachment-files {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.attachment-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: stretch;
  max-width: 520rpx;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-muted);
}

.attachment-file__icon {
  flex-shrink: 0;
  color: var(--color-muted-fg);
}

.attachment-file__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.attachment-file__name {
  font-size: var(--text-sm);
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-file__meta {
  font-size: var(--text-xs);
  color: var(--color-muted-fg);
}

.attachment-videos,
.attachment-audios {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.attachment-video {
  width: 480rpx;
  max-width: 100%;
  border-radius: var(--radius-md);
}

.attachment-audio {
  width: 480rpx;
  max-width: 100%;
  margin-top: var(--space-1);
}

.thread-affordance {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 2rpx 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--color-md-link);
}

.thread-participants {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10rpx;
}

.thread-avatar {
  width: 32rpx;
  height: 32rpx;
  margin-left: -8rpx;
  border: 2rpx solid var(--color-bg);
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-bg);
  box-sizing: border-box;
}

.thread-avatar:first-child {
  margin-left: 0;
}

.thread-avatar-img,
.thread-avatar-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.thread-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-avatar-human);
  color: var(--color-avatar-fg);
  font-size: 16rpx;
  font-weight: var(--font-semibold);
  line-height: 1;
}

.thread-avatar-initials.avatar-initials--agent {
  background-color: var(--color-avatar-agent);
}

.thread-avatar-initials.avatar-initials--service {
  background-color: var(--color-avatar-service);
}

.thread-icon {
  margin-right: 6rpx;
}

.thread-label {
  color: var(--color-md-link);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.pending-tag {
  font-size: var(--text-xs);
  color: var(--color-muted-fg);
  margin-left: 8rpx;
}

.pending-tag--sending {
  font-style: italic;
}

.retry-affordance {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 4rpx 12rpx;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  font-size: var(--text-xs);
  color: var(--color-danger, #e5484d);
}

.retry-affordance__icon {
  margin-right: 6rpx;
}

.retry-affordance__label {
  color: var(--color-danger, #e5484d);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

.reaction-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rpx;
  margin-top: 12rpx;
}

.reaction-chip {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 42rpx;
  padding: 0 16rpx;
  border: 1rpx solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg);
  color: var(--color-fg);
  box-sizing: border-box;
}

.reaction-chip__emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28rpx;
  margin-right: 6rpx;
  font-size: 24rpx;
  line-height: 1;
}

.reaction-chip__count {
  color: var(--color-fg);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
}