<template>
  <div class="bg-white h-full w-full p-[20px]">
    <div class="home-tab">
      <message-list />
      <div class="main-area">
        <chat-guide />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MessageList from './MessageList.vue'
import ChatGuide from './ChatGuide.vue'
</script>

<style scoped>
.home-tab {
  display: flex;
  height: 100%;
  width: 100%;
}
.home-tab > :first-child { flex: 0 0 260px }
.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }

/* match MessageList scrollbar: 8px, subtle thumb */
.main-area { scrollbar-width: auto }
.main-area::-webkit-scrollbar { width: 8px }
.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
.main-area::-webkit-scrollbar-track { background: transparent }

@media (max-width: 900px) {
  .home-tab { flex-direction: column }
  .home-tab > :first-child { flex: none; width: 100% }
  .main-area { padding: 12px }
}
</style>