@push('css')
    <style>
        .name_title:hover .btn-modal {
            opacity: 1;
        }
    </style>
@endpush

<div class="me" v-if="(item.msg_kind == msgKindNew.action_booking  && item.type == typeMessageV2.action_booking_lesson && item.is_message_new)">
    <div  class="w-[300px] float-right justify-end name_title">
        <div class="flex  items-center justify-between mt-[10px]">
            <div  class="text-[12px] text-[#222222] ml-[50px] mb-[5px]">予約送信</div>
            <div class="flex  items-center justify-end mb-[5px] sender_show" >
                <div class="text-[12px] text-[#888888] font-light mr-[10px] nameMe overflow-hidden text-ellipsis w-[150px] ">@{{ item.bot_send.view_name }}</div>
                <img class="rounded-[50%] w-[25px] h-[25px] "
                @error="setAltImg"
                :src=" item.bot_send.bot_image ? item.bot_send.bot_image : '/images/avatar_bot_v2.png'" alt="">
            </div>
        </div>
        <div class="flex items-center justify-end bot_send_content">
            <div class="tooltip-container cursor-pointer event_mess_show" v-if="item.quote_token"
                 @click="quoteMessage(item)"
            >
                <i class="fal fa-reply text-[#888888] text-[14px] ic-share_reply"></i>
            </div>
            <div class="message-box-info w-[250px]">
                <div class="message text-[14px] text-[#222222] rounded-[10px]"
                     v-html="showMessageContentActionBooking(item)">
                </div>
            </div>
        </div>

        <div class="flex justify-content-between">
            <div class="time-send text-[12px] text-[#888888] text-left mt-time-bottom  ml-[50px]">@{{ timeSend(item.created_at) }}</div>
            <a class=" staff_name_show underline text-[12px] text-[#5799DB] btn-modal" v-on:click="openBookingMessageAction(item)">詳細情報</a>
        </div>
    </div>
</div>