<script setup>
/* Vista raíz “/” → muestra el chat estilo ChatGPT */
import CanvasChat from '@/components/chat/CanvasChat.vue'
</script>

<template>
  <div class="chat-view-container flex flex-col h-full">
    <header class="page-header">
      <h1>Chat</h1>
    </header>
    <CanvasChat class="flex-1 min-h-0" /> <!-- Added min-h-0 -->
  </div>
</template>

<style scoped>
.chat-view-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--background-color-chat, #F0F0F0); /* Fallback to store default */
}

.page-header {
  display: flex;
  justify-content: space-between; /* Consistent with other headers, even if no button on right */
  align-items: center;
  margin-bottom: 25px; /* Consistent with PlanillasIndex */
  padding: 10px 20px; /* Provides padding for the header itself */
  border-bottom: 1px solid #eee; /* Consistent with PlanillasIndex */
}

.page-header h1 {
  color: var(--accent-color-chat, #0D9488); /* Fallback to store default */
  font-size: 2.2em; /* Consistent with PlanillasIndex */
  font-weight: 600; /* Consistent with PlanillasIndex */
}

/* CanvasChat is expected to manage its own internal padding and scrolling */
</style>
