.chat-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
  overflow-y: auto;
  padding-block-end: var(--space-md);
}

.chat-message {
  display: flex;
  gap: var(--space-sm);
  max-inline-size: 48rem;

  &[data-role="user"] {
    margin-inline-start: auto;
    flex-direction: row-reverse;

    & .chat-message__bubble {
      background-color: var(--color-primary);
      color: #fff;
      border-end-end-radius: var(--radius-sm);
    }
  }

  &[data-role="assistant"] {
    & .chat-message__bubble {
      background-color: var(--theme-surface-subtle);
      border-end-start-radius: var(--radius-sm);
      box-shadow: var(--shadow-card);
    }
  }

  &[data-state="pending"] {
    & .chat-message__bubble {
      opacity: 0.6;
    }
  }
}

.chat-message__bubble {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  max-inline-size: 36rem;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), opacity var(--transition-base);
}

.chat-compose {
  display: flex;
  gap: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--theme-border);

  & .form-input {
    flex: 1;
  }
}