<script setup lang="ts">
defineProps<{
  title: string;
}>();
</script>

<template>
  <section class="agent-chat-welcome-state" aria-live="polite">
    <h2 class="agent-chat-welcome-state__title">{{ title }}</h2>
  </section>
</template>

<style scoped>
.agent-chat-welcome-state {
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.agent-chat-welcome-state__title {
  max-width: min(720px, 100%);
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.16;
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>
