.au-chat-message {
  --au-message-gap: 12px;
  --au-message-avatar: 30px;
  align-items: start;
  display: grid;
  gap: var(--au-message-gap);
  grid-template-columns: var(--au-message-avatar) minmax(0, 1fr);
  padding: 14px 0;
}

.au-chat-message__avatar {
  align-items: center;
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: 8px;
  color: var(--au-fg-subtle);
  display: flex;
  font: 600 10px/1 var(--au-font-mono);
  height: var(--au-message-avatar);
  justify-content: center;
  width: var(--au-message-avatar);
}

.au-chat-message__meta {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 5px;
}

.au-chat-message__role {
  color: var(--au-fg);
  font-size: 12px;
  font-weight: 650;
}

.au-chat-message__time,
.au-chat-message__model {
  color: var(--au-fg-subtle);
  font: 10px/1.3 var(--au-font-mono);
}

.au-chat-message__body {
  color: var(--au-fg-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.au-chat-message__body code {
  color: var(--au-action);
  font: 12px/1.4 var(--au-font-mono);
}

.au-chat-message__details {
  margin: 0;
}

.au-chat-message__details > summary {
  color: var(--au-fg-subtle);
  cursor: pointer;
  display: inline-flex;
  font: 10px/1.3 var(--au-font-mono);
  list-style: none;
  margin-bottom: 6px;
  width: fit-content;
}

.au-chat-message__details > summary::-webkit-details-marker {
  display: none;
}

.au-chat-message__details > summary:focus-visible {
  border-radius: var(--au-radius-sm);
  box-shadow: var(--au-focus-ring);
  outline: 2px solid var(--au-focus);
  outline-offset: 2px;
}

.au-chat-message__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.au-chat-message__actions .au-btn {
  --au-btn-height: 28px;
  --au-btn-padding-inline: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  min-height: 28px;
}

.au-chat-message--user .au-chat-message__avatar {
  background: var(--au-action-soft);
  border-color: color-mix(in srgb, var(--au-action) 30%, var(--au-border-color));
  color: var(--au-action);
}

.au-chat-message--system .au-chat-message__body {
  color: var(--au-fg-subtle);
  font-family: var(--au-font-mono);
  font-size: 12px;
}

.au-chat-message--tool {
  border-top: 1px solid var(--au-border-color);
}