<template>
  <div class="chat">

    <div class="chat--nav">
      <span>&lt; Back</span>
      <h3>Company Name</h3>
      <span>...</span>
    </div>

    <div class="chat--history">
      <span>Hey there... </span>
    </div>

    <div class="message">
      <!-- <h2>Messages</h2> -->
      <span>Type messages here...</span>
    </div>

  </div>

</template>

<script>
  import icon from '@/components/icon'
  import card from '@/components/card'
  import { defineComponent } from 'vue'
  import { NButton } from 'naive-ui'

  export default defineComponent({
    components: {
      NButton,
      card,
      icon
    }
  })
</script>

<style lang="postcss">
  h3
    margin: 0
  
  .chat
    width: 100%
    display: flex
    flex-flow: column
    /* padding: 20px */
    text-align: left
    height: 90%
  

  .chat--nav
    display: flex
    flex-direction: row
    justify-content: space-between
    border-bottom: 1px solid rgba(0,0,0,0.5)
    width: 100%
    & > *
      padding: 10px
    
  

  .chat--history
    padding: 20px
    flex: 1
    overflow: auto
  

  .row
    display: flex
    flex-direction: row
    /* width: 100vw */
    overflow:scroll
  

  .message
    position: relative
    bottom: 0
    min-height: 60px
    width: 100%
    display: block
    text-align: left
    /* margin-bottom: 10px */
    background-color: transparent
    border: 1px solid #ccc
    padding: 12px
    
  
  .n-card__content
    padding-top: 0
  

  .matched
    display: flex
    flex-direction: row
    background-color: rgba(0,0,0,0.0)
    margin-bottom: 12px
    border-bottom: 1px solid rgba(150,150,150,0.25)
  

  .icon
    /* display: inline-block */
    padding: 8px 12px
    margin: -1px
    /* flex-grow: 0 */
    border-bottom: 1px solid rgba(250,250,250,0.95)
  
  .active
    /* background-color: rgba(250,50,50,0.3) */
  
</style>