@extends('admin.layout.master')
@section('content')
@section('chat', 'active')
@section('title', 'Chat')
<!--start page wrapper -->
<style>
    .chat-footer-menu button {
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        color: #6c757d;
        text-align: center;
        border-radius: 50%;
        margin: 3px;
        background-color: #fff;
        border: 1px solid rgb(0 0 0 / 15%);
    }
    .chat-content {
        overflow-y: scroll;
    }

    .attachment-btn {
        cursor: pointer;
    }

    .attachment-icon .bx-file {
        font-size: 26px;
    }

    #attachment_input {
        display: none;
    }

    .attachment-icon {
        display: inline;
        position: relative;
    }

    .attachment-icon .close {
        color: white;
        background: red;
        border-radius: 37%;
        /* padding: 0px; */
        position: absolute;
        right: -5px;
        font-size: 10px;
        top: -8px;
        z-index: 1;
    }
</style>
<div class="page-wrapper">
    <div class="page-content">
        @livewire('chat.chat-messages',compact('id','freelancerId'))
    </div>
</div>
@endsection
<!--end page wrapper -->
@section('script')
    @yield('scripts')
@endsection