@section('title', __('Atendimento'))
<div wire:poll.20s>
    {{-- conceito WhatsApp: a página NÃO rola; o diálogo é o principal e rola
         sozinho; conversas à esquerda; dados do contato num painel opcional --}}
    <div class="km-chat-wrap" x-data="{ dados: false, acoes: false }">

        {{-- ==================== conversas (esquerda) ==================== --}}
        <div class="km-chat-list {{ $ticket ? 'km-some-mobile' : '' }}">
            <div class="flex items-center justify-between px-3 py-2 border-b" style="background:#f8faf9">
                <p class="text-sm font-bold text-gray-800">{{ __('Atendimento') }}</p>
                <span class="flex items-center gap-1">
                    <a href="{{ route('support.report') }}" class="km-icone" title="{{ __('Relatório do atendimento') }}"
                        style="width:28px;height:28px;font-size:13px;display:flex;align-items:center;justify-content:center">📊</a>
                    @hasrole('admin')
                        <a href="{{ route('support.settings') }}" class="km-icone" title="{{ __('Ajustes do atendimento (SLA, IA, chamados)') }}"
                            style="width:28px;height:28px;font-size:13px;display:flex;align-items:center;justify-content:center">⚙</a>
                        <a href="{{ route('support.knowledge') }}" class="km-icone" title="{{ __('Base de conhecimento: fatos da IA e respostas prontas') }}">📚</a>
                    @endhasrole
                    <button wire:click="puxarProximo" class="px-3 text-xs font-bold text-white rounded-full"
                        style="background:#15803d;padding-top:5px;padding-bottom:5px">{{ __('Puxar próximo') }}</button>
                </span>
            </div>
            <div class="px-3 py-2">
                <input type="text" wire:model.debounce.400ms="busca"
                    placeholder="{{ __('Buscar nome ou protocolo') }}"
                    class="w-full text-sm border-0 rounded-full" style="background:#f0f2f5;padding:7px 14px" />
            </div>
            <div class="km-chat-list-scroll">
                @foreach ([
                    ['rotulo' => __('Fila'), 'itens' => $fila, 'vazio' => __('Fila vazia.')],
                    ['rotulo' => __('Meus atendimentos'), 'itens' => $meus, 'vazio' => null],
                    ['rotulo' => '✦ ' . __('IA atendendo'), 'itens' => $comIa, 'vazio' => null],
                    ['rotulo' => __('Chamados'), 'itens' => $chamados, 'vazio' => null],
                ] as $secao)
                    @if (count($secao['itens']) || $secao['vazio'])
                        <p class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-gray-400 uppercase">
                            {{ $secao['rotulo'] }} @if (count($secao['itens'])) ({{ count($secao['itens']) }}) @endif
                        </p>
                    @endif
                    @forelse ($secao['itens'] as $f)
                        @php $nome = optional($f->requester)->name ?: __('Sem cadastro'); @endphp
                        <button wire:click="abrirTicket({{ $f->id }})"
                            class="flex items-center w-full gap-2 px-3 py-2 text-left {{ $ticketId === $f->id ? '' : 'hover:bg-gray-50' }}"
                            style="{{ $ticketId === $f->id ? 'background:#e9f4ee' : '' }}">
                            <span class="km-avatar" style="background:{{ $f->priority === 'critica' ? '#fee2e2;color:#b91c1c' : '#e3efe7;color:#14532d' }}">
                                {{ mb_strtoupper(mb_substr($nome, 0, 1)) }}
                            </span>
                            <span style="flex:1;min-width:0">
                                <span class="flex items-center justify-between">
                                    <b class="text-sm text-gray-800" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $nome }}</b>
                                    <span class="text-[10px] text-gray-400" style="flex-shrink:0">{{ $f->updated_at->format('H:i') }}</span>
                                </span>
                                <span class="flex items-center justify-between gap-1">
                                    <span class="text-xs text-gray-500" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                                        {{ \Illuminate\Support\Str::limit((string) $f->ultima_msg, 34) }}
                                    </span>
                                    @if ($f->status === 'aguardando')
                                        @php
                                            $esperaSeg = (int) $f->created_at->diffInSeconds(now());
                                            $sla = \App\Models\SupportTicket::slaNivel($esperaSeg);
                                        @endphp
                                        {{-- SLA da fila: ninguém pode esperar demais sem a lista gritar --}}
                                        <span class="px-1.5 text-[10px] font-bold rounded-full {{ $sla === 'critico' ? 'km-pulse' : '' }}"
                                            style="flex-shrink:0;padding-top:1px;padding-bottom:1px;{{ $sla === 'critico' ? 'background:#dc2626;color:#fff' : ($sla === 'atencao' ? 'background:#fef3c7;color:#92400e' : 'background:#f1f5f9;color:#64748b') }}">
                                            {{ \App\Models\SupportTicket::duracao($esperaSeg) }}
                                        </span>
                                        @if ($f->priority !== 'normal')
                                            <span class="km-pontinho" style="background:{{ $f->priority === 'critica' ? '#dc2626' : '#d97706' }}"></span>
                                        @endif
                                    @elseif ($f->status === 'chamado')
                                        <span class="text-[10px] font-bold" style="flex-shrink:0;color:{{ $f->due_at && $f->due_at->isPast() ? '#dc2626' : '#92400e' }}">
                                            {{ $f->due_at ? $f->due_at->format('d/m') : '' }}
                                        </span>
                                    @elseif ($f->priority !== 'normal')
                                        <span class="km-pontinho" style="background:{{ $f->priority === 'critica' ? '#dc2626' : '#d97706' }}"></span>
                                    @endif
                                </span>
                            </span>
                        </button>
                    @empty
                        @if ($secao['vazio'])
                            <p class="px-3 py-1 text-xs font-semibold" style="color:#15803d">{{ $secao['vazio'] }}</p>
                        @endif
                    @endforelse
                @endforeach
            </div>
            <div class="px-3 py-1 text-[10px] text-gray-400 border-t" style="background:#f8faf9">
                {{ $contadores['aguardando'] }} {{ __('na fila') }} · {{ $contadores['emAtendimento'] }} {{ __('em atendimento') }} ·
                {{ $contadores['chamadosVencendo'] }} {{ __('chamados vencendo') }}
            </div>
        </div>

        {{-- ==================== o diálogo (principal) ==================== --}}
        <div class="km-chat-main {{ $ticket ? '' : 'km-some-mobile' }}">
            @if (!$ticket)
                <div class="flex flex-col items-center justify-center h-full text-center" style="background:#f8faf9">
                    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#c6cfcb" stroke-width="1.5">
                        <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/>
                    </svg>
                    <p class="mt-3 font-semibold text-gray-500">{{ __('Escolha uma conversa') }}</p>
                    <p class="mt-1 text-xs text-gray-400">{{ __('A IA filtra e atende primeiro; aqui chega o que precisa de um atendente.') }}</p>
                </div>
            @else
                @php $nome = optional($ticket->requester)->name ?: __('Sem cadastro'); @endphp
                {{-- cabeçalho da conversa --}}
                <div class="km-chat-head">
                    <button wire:click="fecharConversa" class="km-so-mobile" style="border:0;background:none;color:#4b5563;font-size:18px">←</button>
                    <span class="km-avatar" style="background:#e3efe7;color:#14532d">{{ mb_strtoupper(mb_substr($nome, 0, 1)) }}</span>
                    <div style="flex:1;min-width:0">
                        <p class="text-sm font-bold text-gray-800" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                            {{ $nome }} <span class="font-normal text-gray-400">· {{ $ticket->protocol }}</span>
                        </p>
                        <p class="text-[11px] text-gray-500">
                            @php $met = $ticket->metricas(); @endphp
                            {{ $ticket->channel === 'app_motorista' ? __('Motorista') : ($ticket->channel === 'app_cliente' ? __('Passageiro') : __('Interno')) }}
                            · {{ $ticket->status_label }}
                            @if ($ticket->status === 'aguardando_usuario' && !$ticket->assigned_to)
                                · <span style="color:#7c3aed;font-weight:700">✦ {{ __('IA atendendo') }}</span>
                            @endif
                            @if ($met['filaCorrendo'])
                                · <span style="color:#d97706;font-weight:600">{{ __('na fila há') }} {{ \App\Models\SupportTicket::duracao($met['filaSeg']) }}</span>
                            @elseif ($met['atendimentoCorrendo'])
                                · <span style="color:#1d4ed8;font-weight:600">{{ __('com atendente há') }} {{ \App\Models\SupportTicket::duracao($met['atendimentoSeg']) }}</span>
                            @endif
                            @if ($ticket->operador) · {{ __('com') }} {{ $ticket->operador->name }} @endif
                            @if ($ticket->due_at) · {{ __('prazo') }} {{ $ticket->due_at->format('d/m/Y') }} @endif
                        </p>
                    </div>
                    @if ($ticket->status === 'aguardando')
                        <button wire:click="assumir" class="px-3 text-xs font-bold text-white rounded-full"
                            style="background:#1d4ed8;padding-top:6px;padding-bottom:6px">{{ __('Assumir') }}</button>
                    @endif
                    <button @click="dados = !dados" title="{{ __('Dados do contato') }}"
                        class="km-icone">ⓘ</button>
                    @if (!in_array($ticket->status, ['resolvido', 'sem_procedencia']))
                        <div class="relative">
                            <button @click="acoes = !acoes" class="km-icone">⋮</button>
                            <div x-show="acoes" @click.away="acoes = false" x-cloak
                                class="absolute right-0 z-20 mt-1 bg-white border rounded-lg shadow-lg" style="width:200px">
                                <button wire:click="$toggle('formChamado')" @click="acoes = false"
                                    class="block w-full px-3 py-2 text-sm text-left hover:bg-gray-50">{{ __('Abrir solicitação (chamado)') }}</button>
                                <p class="px-3 pt-2 pb-1 text-[10px] font-bold tracking-widest text-gray-400 uppercase border-t">{{ __('Encerrar como') }}</p>
                                <button wire:click="encerrarCom('resolvido')" @click="acoes = false"
                                    class="block w-full px-3 py-2 text-sm text-left hover:bg-gray-50" style="color:#15803d">{{ __('Resolvido') }}</button>
                                <button wire:click="encerrarCom('sem_procedencia')" @click="acoes = false"
                                    class="block w-full px-3 py-2 text-sm text-left hover:bg-gray-50" style="color:#b91c1c">{{ __('Sem procedência') }}</button>
                                <button wire:click="encerrarCom('sem_resposta')" @click="acoes = false"
                                    class="block w-full px-3 py-2 text-sm text-left hover:bg-gray-50" style="color:#92400e">{{ __('Sem resposta do usuário') }}</button>
                                <button wire:click="encerrarCom('duplicado')" @click="acoes = false"
                                    class="block w-full px-3 py-2 text-sm text-left hover:bg-gray-50" style="color:#475569">{{ __('Duplicado') }}</button>
                            </div>
                        </div>
                    @endif
                </div>

                {{-- as mensagens (só isto rola) --}}
                <div class="km-chat-scroll" id="km-chat-scroll">
                    @foreach ($ticket->messages as $m)
                        @if ($m->author === 'sistema')
                            <div class="km-bolha-sys">{{ $m->body }} · {{ $m->created_at->format('d/m H:i') }}</div>
                        @else
                            @php $doOperador = $m->author === 'operador'; @endphp
                            <div class="km-bolha {{ $m->internal ? 'km-bolha-interna' : ($doOperador ? 'km-bolha-op' : ($m->author === 'ia' ? 'km-bolha-ia' : 'km-bolha-user')) }}">
                                @if (!$doOperador)
                                    <p class="text-[10px] font-bold" style="color:#0b7261">
                                        {{ $m->author === 'ia' ? __('Assistente (IA)') : $nome }}
                                    </p>
                                @elseif ($m->internal)
                                    <p class="text-[10px] font-bold" style="color:#92400e">{{ __('Nota interna · o usuário não vê') }}</p>
                                @endif
                                <p class="text-sm text-gray-800" style="white-space:pre-line">{{ $m->body }}</p>
                                <p class="km-hora">{{ $m->created_at->format('H:i') }}</p>
                            </div>
                        @endif
                    @endforeach
                </div>

                {{-- compositor fixo --}}
                @if (!in_array($ticket->status, ['resolvido', 'sem_procedencia']))
                    @if ($formChamado)
                        <div class="flex flex-wrap items-end gap-3 px-3 py-2 border-t" style="background:#fffbeb">
                            <x-km.filtro rotulo="{{ __('Categoria do chamado') }}">
                                <input type="text" wire:model.defer="categoria" placeholder="{{ __('ex.: estorno, cobrança') }}"
                                    class="text-sm border-gray-300 rounded-md" />
                            </x-km.filtro>
                            <x-km.filtro rotulo="{{ __('Prazo (dias)') }}">
                                <input type="number" wire:model.defer="prazoDias" min="1" max="30"
                                    class="text-sm border-gray-300 rounded-md" style="width:80px" />
                            </x-km.filtro>
                            <button wire:click="virarChamado" class="px-3 text-sm font-bold text-white rounded-md"
                                style="background:#d97706;padding-top:8px;padding-bottom:8px">{{ __('Abrir chamado') }}</button>
                            <p class="w-full text-[11px]" style="color:#92400e">{{ __('A mensagem abaixo vira a nota do chamado; o usuário recebe protocolo e prazo.') }}</p>
                        </div>
                    @endif
                    <div class="km-chat-composer" style="{{ $interna ? 'background:#fef9c3' : '' }}">
                        <button wire:click="$toggle('interna')" title="{{ __('Nota interna (o usuário não vê)') }}"
                            class="km-icone" style="{{ $interna ? 'background:#f59e0b;color:#fff' : '' }}">✎</button>
                        <button wire:click="sugerirIa" wire:loading.attr="disabled" wire:target="sugerirIa"
                            title="{{ __('Sugerir resposta (IA): usa a conversa e os dados da corrida') }}"
                            class="km-icone" style="color:#7c3aed">✦</button>
                        <div style="flex:1;min-width:0;position:relative">
                            {{-- respostas prontas: o operador nao digita do zero e o tom fica igual --}}
                            @if ($respostasProntas->count())
                                <div x-data="{ aberto: false }" style="position:absolute;left:6px;top:-30px">
                                    <button type="button" @click="aberto = !aberto"
                                        class="text-[11px] font-bold" style="color:#15803d">
                                        ⚡ {{ __('Respostas prontas') }}
                                    </button>
                                    <div x-show="aberto" x-cloak @click.outside="aberto = false"
                                        style="position:absolute;bottom:22px;left:0;z-index:30;width:320px;max-height:260px;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12)">
                                        @foreach ($respostasProntas as $r)
                                            <button type="button" wire:click="usarResposta({{ $r['id'] }})" @click="aberto = false"
                                                class="block w-full px-3 py-2 text-left border-b hover:bg-gray-50" style="border-color:#f3f4f6">
                                                <span class="text-xs font-bold text-gray-700">{{ $r['titulo'] }}</span>
                                                <span class="block text-[11px] text-gray-500">{{ \Illuminate\Support\Str::limit($r['conteudo'], 70) }}</span>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <textarea wire:model="resposta" wire:keydown.enter="responder" rows="1"
                                placeholder="{{ $interna ? __('Nota interna para a equipe...') : __('Mensagem para o usuário...') }}"
                                class="w-full text-sm border-gray-200 rounded-full" style="resize:none;padding:9px 16px"></textarea>
                            <span wire:loading wire:target="sugerirIa"
                                class="text-[10px] font-bold" style="position:absolute;right:14px;top:-14px;color:#7c3aed">
                                {{ __('IA escrevendo...') }}</span>
                        </div>
                        <button wire:click="responder" wire:loading.attr="disabled" title="{{ __('Enviar') }}"
                            class="km-enviar">➤</button>
                    </div>
                @else
                    <div class="px-3 py-2 text-xs text-center text-gray-500 border-t" style="background:#f8faf9">
                        {{ __('Encerrado em') }} {{ $ticket->closed_at?->format('d/m/Y H:i') }}
                        · <b>{{ $ticket->desfecho_label }}</b>
                        · {{ __('fila') }} {{ \App\Models\SupportTicket::duracao($ticket->metricas()['filaSeg']) }}
                        @if ($ticket->metricas()['atendimentoSeg'] !== null)
                            · {{ __('com atendente') }} {{ \App\Models\SupportTicket::duracao($ticket->metricas()['atendimentoSeg']) }}
                        @endif
                    </div>
                @endif
            @endif
        </div>

        {{-- ==================== dados do contato (painel opcional) ==================== --}}
        @if ($ticket)
            <div class="km-chat-info" x-show="dados" x-cloak>
                <div class="flex items-center justify-between px-3 py-2 border-b" style="background:#f8faf9">
                    <p class="text-sm font-bold text-gray-800">{{ __('Dados do contato') }}</p>
                    <button @click="dados = false" style="border:0;background:none;color:#9ca3af">✕</button>
                </div>
                <div class="p-3 space-y-3">
                    @php $met = $ticket->metricas(); @endphp
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Linha do tempo') }}</p>
                        <div class="mt-1 space-y-1 text-xs text-gray-600">
                            <p class="flex justify-between"><span>{{ __('Iniciado em') }}</span><b>{{ $met['inicio']->format('d/m/Y H:i') }}</b></p>
                            <p class="flex justify-between"><span>{{ __('Tempo em fila') }}</span>
                                <b style="color:{{ $met['filaCorrendo'] ? '#d97706' : '#111827' }}">{{ \App\Models\SupportTicket::duracao($met['filaSeg']) }}{{ $met['filaCorrendo'] ? ' ⏱' : '' }}</b></p>
                            <p class="flex justify-between"><span>{{ __('Com atendente') }}</span>
                                <b style="color:{{ $met['atendimentoCorrendo'] ? '#1d4ed8' : '#111827' }}">{{ \App\Models\SupportTicket::duracao($met['atendimentoSeg']) }}{{ $met['atendimentoCorrendo'] ? ' ⏱' : '' }}</b></p>
                            <p class="flex justify-between"><span>{{ __('1ª resposta (IA conta)') }}</span><b>{{ \App\Models\SupportTicket::duracao($met['primeiraRespostaSeg']) }}</b></p>
                            <p class="flex justify-between"><span>{{ __('Duração total') }}</span><b>{{ \App\Models\SupportTicket::duracao($met['totalSeg']) }}</b></p>
                            @if ($ticket->closed_at)
                                <p class="flex justify-between"><span>{{ __('Desfecho') }}</span>
                                    <x-km.chip tipo="{{ in_array($ticket->closed_reason, ['resolvido', 'resolvido_pela_ia']) ? 'ok' : ($ticket->closed_reason === 'sem_procedencia' ? 'erro' : 'neutro') }}">{{ $ticket->desfecho_label }}</x-km.chip></p>
                            @endif
                        </div>
                    </div>
                    @if ($ticket->requester)
                        <div>
                            <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Quem é') }}</p>
                            <p class="mt-1 text-sm font-semibold text-gray-800">{{ $ticket->requester->name }}</p>
                            <p class="text-xs text-gray-500">{{ $ticket->requester->email }}</p>
                            <p class="text-xs text-gray-500">{{ $ticket->requester->phone }}</p>
                            <a href="{{ route('drivers.profile', $ticket->requester->id) }}" target="_blank"
                                class="text-xs" style="color:#15803d;text-decoration:underline">{{ __('Ficha completa') }}</a>
                        </div>
                    @endif
                    @if ($ticket->subject_type === \App\Models\Order::class && $ticket->subject)
                        <div>
                            <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Corrida') }}</p>
                            <a href="{{ route('orders.details', ['code' => $ticket->subject->code]) }}" target="_blank"
                                class="text-sm font-semibold" style="color:#15803d">#{{ $ticket->subject->code }}</a>
                        </div>
                    @endif
                    {{-- corridas do solicitante com acao de estorno: resolver sem sair da conversa --}}
                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Últimas corridas') }}</p>
                        @forelse ($corridas as $c)
                            @php
                                $pagoAsaas = \Illuminate\Support\Str::startsWith((string) optional($c->payment_method)->slug, 'asaas')
                                    && optional($c->payment)->status === 'successful';
                                $saldo = (float) ($c->payable_total ?: $c->total) - (float) $c->ja_estornado;
                            @endphp
                            <div class="p-2 mt-1 border rounded-lg" style="border-color:#e5e7eb">
                                <div class="flex items-center justify-between">
                                    <a href="{{ route('orders.details', ['code' => $c->code]) }}" target="_blank"
                                        class="text-xs font-semibold" style="color:#15803d">#{{ $c->code }}</a>
                                    <span class="text-[10px] text-gray-400">{{ $c->created_at->format('d/m H:i') }}</span>
                                </div>
                                <div class="flex items-center justify-between mt-1">
                                    <span class="text-xs text-gray-600">
                                        {{ currencyFormat((float) ($c->payable_total ?: $c->total)) }}
                                        · {{ optional($c->payment_method)->name ?: __('sem meio') }}
                                    </span>
                                    @if ($c->ja_estornado > 0)
                                        <x-km.chip tipo="neutro">{{ __('estornado') }} {{ number_format((float) $c->ja_estornado, 2, ',', '.') }}</x-km.chip>
                                    @endif
                                </div>
                                @if ($pagoAsaas && $saldo > 0 && $podeEstornar)
                                    <button wire:click="abrirEstorno({{ $c->id }})"
                                        class="w-full mt-2 text-xs font-semibold"
                                        style="padding:6px;border-radius:6px;background:#fee2e2;color:#b91c1c;border:0">
                                        {{ __('Estornar pelo meio de pagamento') }}
                                    </button>
                                @elseif (!$pagoAsaas)
                                    <p class="mt-1 text-[10px] text-gray-400">{{ __('Pagamento em dinheiro ou não confirmado: estorno é acerto direto.') }}</p>
                                @endif
                            </div>
                        @empty
                            <p class="mt-1 text-xs text-gray-400">{{ __('Nenhuma corrida.') }}</p>
                        @endforelse
                    </div>

                    <div>
                        <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Atendimentos anteriores') }}</p>
                        @forelse ($historico as $h)
                            <button wire:click="abrirTicket({{ $h->id }})" class="flex items-center justify-between w-full mt-1 text-left">
                                <span class="text-xs" style="color:#15803d">{{ $h->protocol }}</span>
                                <span class="text-[10px] text-gray-400">{{ $h->status_label }} · {{ $h->created_at->format('d/m') }}</span>
                            </button>
                        @empty
                            <p class="mt-1 text-xs text-gray-400">{{ __('Primeiro contato.') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>
        @endif
    </div>

    @if ($formEstorno)
        <x-km.modal titulo="{{ __('Estornar pelo meio de pagamento') }}" fechar="fecharEstorno">
            <x-km.aviso tipo="info">
                {{ __('O dinheiro volta para o mesmo cartão ou chave PIX que pagou a corrida. Seu limite por estorno é') }}
                {{ currencyFormat($limiteEstorno) }}{{ __('; acima disso, precisa de um administrador.') }}
            </x-km.aviso>
            <div class="mt-3 space-y-3">
                <div>
                    <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Valor') }}</label>
                    <input type="text" wire:model.defer="valorEstorno" class="w-full text-sm border-gray-300 rounded-md" />
                </div>
                <div>
                    <label class="text-xs font-bold text-gray-500 uppercase">{{ __('Motivo (fica no histórico e na auditoria)') }}</label>
                    <textarea wire:model.defer="motivoEstorno" rows="2" class="w-full text-sm border-gray-300 rounded-md"
                        placeholder="{{ __('Ex.: cobrança em duplicidade da corrida') }}"></textarea>
                </div>
                <div class="flex justify-end gap-2">
                    <button wire:click="fecharEstorno" class="px-3 py-2 text-sm text-gray-600">{{ __('Cancelar') }}</button>
                    <button wire:click="confirmarEstorno" wire:loading.attr="disabled"
                        class="px-4 py-2 text-sm font-semibold text-white rounded-md" style="background:#b91c1c">
                        {{ __('Confirmar estorno') }}
                    </button>
                </div>
            </div>
        </x-km.modal>
    @endif

    <script>
        (function () {
            function baixo() {
                var e = document.getElementById('km-chat-scroll');
                if (e) e.scrollTop = e.scrollHeight;
            }
            document.addEventListener('livewire:load', function () {
                baixo();
                if (window.Livewire && Livewire.hook) {
                    Livewire.hook('message.processed', function () { baixo(); });
                }
            });
            window.addEventListener('km-chat-baixo', baixo);
        })();
    </script>
</div>