@php
    $formatDate = static fn ($date): string => $date?->timezone(config('app.timezone'))->format('d/m/Y H:i') ?? '—';
    $formatRate = static fn (?float $rate): string => $rate === null
        ? '—'
        : number_format($rate, 1, ',', '.').'%';
    $companyName = $identity['company_name'] ?? null;
    $email = (string) ($identity['email'] ?? '');
    $avatar = mb_strtoupper(mb_substr((string) ($companyName ?: $email ?: '@'), 0, 1));
    $stateLabels = [
        'active' => 'Cadastro ativo',
        'removed' => 'Contato removido',
        'snapshot' => 'Somente histórico',
    ];
    $sourceLabels = [
        'import' => 'Importação',
        'manual' => 'Cadastro manual',
        'spreadsheet' => 'Planilha',
    ];
@endphp

<div class="vm-contact-insights">
    <style>
        .vm-contact-insights {
            --vm-ci-forest: #173d31;
            --vm-ci-leaf: #2f6a53;
            --vm-ci-lime: #d4e76d;
            --vm-ci-ink: #18372d;
            --vm-ci-muted: #687970;
            --vm-ci-line: #dbe6e0;
            --vm-ci-paper: #ffffff;
            --vm-ci-wash: #f4f8f5;
            display: grid;
            gap: 1rem;
            color: var(--vm-ci-ink);
        }

        .dark .vm-contact-insights {
            --vm-ci-ink: #effbf5;
            --vm-ci-muted: #a7bbb1;
            --vm-ci-line: rgba(255, 255, 255, .11);
            --vm-ci-paper: rgb(24 24 27);
            --vm-ci-wash: rgba(255, 255, 255, .045);
        }

        .vm-ci-hero {
            position: relative;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: center;
            overflow: hidden;
            padding: 1.15rem;
            border-radius: 1rem;
            color: #f8fffb;
            background:
                radial-gradient(circle at 92% 16%, rgba(212, 231, 109, .26), transparent 29%),
                linear-gradient(128deg, #173d31 0%, #285c48 72%, #327258 100%);
            box-shadow: 0 14px 34px rgba(23, 61, 49, .14);
        }

        .vm-ci-hero::after {
            content: '';
            position: absolute;
            width: 8.5rem;
            height: 8.5rem;
            right: -4.2rem;
            bottom: -5.4rem;
            border: 1px solid rgba(255, 255, 255, .22);
            border-radius: 999px;
        }

        .vm-ci-avatar {
            position: relative;
            z-index: 1;
            display: grid;
            width: 3.45rem;
            height: 3.45rem;
            place-items: center;
            border: 1px solid rgba(255, 255, 255, .24);
            border-radius: .9rem;
            color: var(--vm-ci-forest);
            background: var(--vm-ci-lime);
            font-size: 1.25rem;
            font-weight: 850;
            box-shadow: 0 9px 24px rgba(5, 28, 21, .2);
        }

        .vm-ci-identity {
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .vm-ci-eyebrow {
            color: #dbe98c;
            font-size: .65rem;
            font-weight: 800;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .vm-ci-company {
            margin-top: .2rem;
            overflow: hidden;
            font-size: 1.12rem;
            font-weight: 780;
            letter-spacing: -.02em;
            line-height: 1.25;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .vm-ci-email {
            display: block;
            margin-top: .25rem;
            overflow-wrap: anywhere;
            color: rgba(248, 255, 251, .78);
            font-size: .8rem;
        }

        .vm-ci-record-state {
            position: relative;
            z-index: 1;
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .42rem .62rem;
            border: 1px solid rgba(255, 255, 255, .19);
            border-radius: 999px;
            background: rgba(255, 255, 255, .09);
            color: rgba(255, 255, 255, .9);
            font-size: .7rem;
            font-weight: 720;
            white-space: nowrap;
            backdrop-filter: blur(8px);
        }

        .vm-ci-record-state::before {
            content: '';
            width: .48rem;
            height: .48rem;
            border-radius: 50%;
            background: var(--vm-ci-lime);
            box-shadow: 0 0 0 3px rgba(212, 231, 109, .15);
        }

        .vm-ci-record-state[data-state='removed']::before {
            background: #ffb19f;
            box-shadow: 0 0 0 3px rgba(255, 177, 159, .15);
        }

        .vm-ci-record-state[data-state='snapshot']::before {
            background: #c9d2ce;
            box-shadow: 0 0 0 3px rgba(201, 210, 206, .14);
        }

        .vm-ci-context {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem 1rem;
            padding: .05rem .15rem;
            color: var(--vm-ci-muted);
            font-size: .72rem;
        }

        .vm-ci-context strong {
            color: var(--vm-ci-ink);
            font-weight: 720;
        }

        .vm-ci-kpis {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: .65rem;
        }

        .vm-ci-kpi,
        .vm-ci-panel {
            border: 1px solid var(--vm-ci-line);
            border-radius: .85rem;
            background: var(--vm-ci-paper);
        }

        .vm-ci-kpi {
            position: relative;
            overflow: hidden;
            min-height: 6.2rem;
            padding: .85rem;
        }

        .vm-ci-kpi::after {
            content: '';
            position: absolute;
            width: 2.4rem;
            height: .18rem;
            right: .8rem;
            top: .85rem;
            border-radius: 999px;
            background: var(--vm-ci-line);
        }

        .vm-ci-kpi[data-tone='leaf']::after { background: #7eb292; }
        .vm-ci-kpi[data-tone='lime']::after { background: #b9d143; }
        .vm-ci-kpi[data-tone='gold']::after { background: #d8ad62; }

        .vm-ci-kpi-label {
            max-width: calc(100% - 2.8rem);
            color: var(--vm-ci-muted);
            font-size: .64rem;
            font-weight: 780;
            letter-spacing: .075em;
            text-transform: uppercase;
        }

        .vm-ci-kpi-value {
            margin-top: .65rem;
            color: var(--vm-ci-ink);
            font-size: 1.55rem;
            font-weight: 820;
            letter-spacing: -.045em;
            line-height: 1;
        }

        .vm-ci-kpi-note {
            margin-top: .38rem;
            color: var(--vm-ci-muted);
            font-size: .68rem;
            line-height: 1.35;
        }

        .vm-ci-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
            gap: .75rem;
            align-items: start;
        }

        .vm-ci-panel {
            padding: 1rem;
        }

        .vm-ci-panel-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: .85rem;
        }

        .vm-ci-panel-title {
            color: var(--vm-ci-ink);
            font-size: .82rem;
            font-weight: 790;
            letter-spacing: -.01em;
        }

        .vm-ci-panel-copy {
            margin-top: .2rem;
            color: var(--vm-ci-muted);
            font-size: .69rem;
            line-height: 1.4;
        }

        .vm-ci-count-chip,
        .vm-ci-tag,
        .vm-ci-status {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            font-size: .66rem;
            font-weight: 720;
        }

        .vm-ci-count-chip {
            padding: .33rem .52rem;
            color: #315846;
            background: #edf4ef;
            white-space: nowrap;
        }

        .dark .vm-ci-count-chip {
            color: #dcece4;
            background: rgba(111, 164, 136, .14);
        }

        .vm-ci-rates {
            display: grid;
            gap: .72rem;
        }

        .vm-ci-rate-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            color: var(--vm-ci-muted);
            font-size: .7rem;
        }

        .vm-ci-rate-top strong {
            color: var(--vm-ci-ink);
            font-size: .73rem;
            font-weight: 780;
        }

        .vm-ci-rate-track {
            height: .38rem;
            margin-top: .32rem;
            overflow: hidden;
            border-radius: 999px;
            background: var(--vm-ci-wash);
        }

        .vm-ci-rate-track::after {
            content: '';
            display: block;
            width: min(100%, var(--vm-rate, 0%));
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--vm-ci-leaf), #83aa56);
        }

        .vm-ci-tracking-note {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: .55rem;
            margin-top: .9rem;
            padding: .7rem;
            border-radius: .65rem;
            color: #5c6140;
            background: #f7f7df;
            font-size: .66rem;
            line-height: 1.45;
        }

        .dark .vm-ci-tracking-note {
            color: #e4e4b5;
            background: rgba(212, 231, 109, .09);
        }

        .vm-ci-tracking-note svg {
            width: 1rem;
            height: 1rem;
            margin-top: .06rem;
            flex: none;
        }

        .vm-ci-health-grid {
            display: grid;
            gap: .52rem;
        }

        .vm-ci-health-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding: .62rem .68rem;
            border-radius: .65rem;
            background: var(--vm-ci-wash);
        }

        .vm-ci-health-label {
            color: var(--vm-ci-muted);
            font-size: .67rem;
        }

        .vm-ci-health-value {
            max-width: 58%;
            color: var(--vm-ci-ink);
            font-size: .69rem;
            font-weight: 730;
            text-align: right;
        }

        .vm-ci-health-value[data-alert='true'] {
            color: #b4533f;
        }

        .dark .vm-ci-health-value[data-alert='true'] {
            color: #ffb5a4;
        }

        .vm-ci-risk-line {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: .42rem;
            margin-top: .7rem;
        }

        .vm-ci-risk {
            padding: .55rem .35rem;
            border: 1px solid var(--vm-ci-line);
            border-radius: .58rem;
            text-align: center;
        }

        .vm-ci-risk strong {
            display: block;
            color: var(--vm-ci-ink);
            font-size: .86rem;
        }

        .vm-ci-risk span {
            display: block;
            margin-top: .1rem;
            color: var(--vm-ci-muted);
            font-size: .58rem;
            line-height: 1.2;
        }

        .vm-ci-list-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .42rem;
        }

        .vm-ci-tag {
            gap: .35rem;
            padding: .4rem .58rem;
            color: #315846;
            background: #edf4ef;
        }

        .vm-ci-tag::before {
            content: '';
            width: .37rem;
            height: .37rem;
            border-radius: 50%;
            background: #7da18e;
        }

        .dark .vm-ci-tag {
            color: #dcece4;
            background: rgba(111, 164, 136, .14);
        }

        .vm-ci-empty {
            padding: .75rem;
            border: 1px dashed var(--vm-ci-line);
            border-radius: .65rem;
            color: var(--vm-ci-muted);
            background: var(--vm-ci-wash);
            font-size: .69rem;
            line-height: 1.45;
        }

        .vm-ci-history {
            display: grid;
            gap: .55rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .vm-ci-history-item {
            position: relative;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: .65rem;
            padding: .72rem;
            border: 1px solid var(--vm-ci-line);
            border-radius: .72rem;
            background: var(--vm-ci-paper);
        }

        .vm-ci-history-item[data-current='true'] {
            border-color: rgba(74, 121, 96, .42);
            background: linear-gradient(90deg, rgba(86, 134, 107, .07), transparent 62%);
        }

        .vm-ci-timeline-mark {
            display: grid;
            width: 1.75rem;
            height: 1.75rem;
            place-items: center;
            border-radius: .52rem;
            color: #315846;
            background: #edf4ef;
        }

        .dark .vm-ci-timeline-mark {
            color: #d9ece2;
            background: rgba(111, 164, 136, .14);
        }

        .vm-ci-timeline-mark svg {
            width: .9rem;
            height: .9rem;
        }

        .vm-ci-history-main {
            min-width: 0;
        }

        .vm-ci-history-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: .65rem;
        }

        .vm-ci-history-name {
            color: var(--vm-ci-ink);
            font-size: .75rem;
            font-weight: 770;
            line-height: 1.3;
        }

        .vm-ci-history-subject {
            margin-top: .13rem;
            overflow: hidden;
            color: var(--vm-ci-muted);
            font-size: .65rem;
            line-height: 1.35;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .vm-ci-status {
            padding: .27rem .45rem;
            color: #315846;
            background: #edf4ef;
            white-space: nowrap;
        }

        .vm-ci-status[data-status='failed'],
        .vm-ci-status[data-status='hard_bounced'],
        .vm-ci-status[data-status='spam'] {
            color: #a54835;
            background: #fff0eb;
        }

        .vm-ci-status[data-status='soft_bounced'],
        .vm-ci-status[data-status='unsubscribed'],
        .vm-ci-status[data-status='suppressed'] {
            color: #956c24;
            background: #fff7df;
        }

        .dark .vm-ci-status {
            color: #dcece4;
            background: rgba(111, 164, 136, .14);
        }

        .dark .vm-ci-status[data-status='failed'],
        .dark .vm-ci-status[data-status='hard_bounced'],
        .dark .vm-ci-status[data-status='spam'] {
            color: #ffb5a4;
            background: rgba(190, 68, 43, .14);
        }

        .dark .vm-ci-status[data-status='soft_bounced'],
        .dark .vm-ci-status[data-status='unsubscribed'],
        .dark .vm-ci-status[data-status='suppressed'] {
            color: #f5d487;
            background: rgba(193, 143, 41, .13);
        }

        .vm-ci-history-meta {
            display: flex;
            flex-wrap: wrap;
            gap: .3rem .7rem;
            margin-top: .5rem;
            color: var(--vm-ci-muted);
            font-size: .62rem;
            line-height: 1.4;
        }

        .vm-ci-history-meta strong {
            color: var(--vm-ci-ink);
            font-weight: 690;
        }

        .vm-ci-current-label {
            color: #57722f;
            font-weight: 780;
        }

        .dark .vm-ci-current-label { color: #d4e76d; }

        .vm-ci-error {
            margin-top: .5rem;
            padding: .48rem .55rem;
            border-radius: .5rem;
            color: #a54835;
            background: #fff0eb;
            font-size: .62rem;
            line-height: 1.4;
            overflow-wrap: anywhere;
        }

        .dark .vm-ci-error {
            color: #ffb5a4;
            background: rgba(190, 68, 43, .14);
        }

        @media (max-width: 900px) {
            .vm-ci-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .vm-ci-layout { grid-template-columns: 1fr; }
        }

        @media (max-width: 620px) {
            .vm-ci-hero { grid-template-columns: auto minmax(0, 1fr); }
            .vm-ci-record-state { grid-column: 1 / -1; justify-self: start; }
            .vm-ci-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .vm-ci-kpi:last-child { grid-column: 1 / -1; }
            .vm-ci-history-top { display: grid; }
            .vm-ci-status { justify-self: start; }
        }

        @media (prefers-reduced-motion: no-preference) {
            .vm-ci-kpi,
            .vm-ci-history-item {
                animation: vm-ci-reveal .24s ease both;
            }

            .vm-ci-kpi:nth-child(2) { animation-delay: .025s; }
            .vm-ci-kpi:nth-child(3) { animation-delay: .05s; }
            .vm-ci-kpi:nth-child(4) { animation-delay: .075s; }
            .vm-ci-kpi:nth-child(5) { animation-delay: .1s; }

            @keyframes vm-ci-reveal {
                from { opacity: 0; transform: translateY(4px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>

    <header class="vm-ci-hero">
        <div class="vm-ci-avatar" aria-hidden="true">{{ $avatar }}</div>
        <div class="vm-ci-identity">
            <div class="vm-ci-eyebrow">Visão 360° do contato</div>
            <div class="vm-ci-company">{{ $companyName ?: 'Empresa não informada' }}</div>
            <span class="vm-ci-email">{{ $email }}</span>
        </div>
        <span class="vm-ci-record-state" data-state="{{ $identity['state'] }}">
            {{ $stateLabels[$identity['state']] ?? 'Histórico' }}
        </span>
    </header>

    <div class="vm-ci-context" aria-label="Contexto do cadastro">
        <span>Origem: <strong>{{ $sourceLabels[$identity['source']] ?? ($identity['source'] ?: 'não informada') }}</strong></span>
        <span>Adicionado em: <strong>{{ $formatDate($identity['created_at']) }}</strong></span>
        <span>Último envio: <strong>{{ $formatDate($last_sent_at) }}</strong></span>
        <span>Último evento: <strong>{{ $formatDate($last_event_at) }}</strong></span>
    </div>

    <section class="vm-ci-kpis" aria-label="Resumo de desempenho do contato">
        <article class="vm-ci-kpi">
            <div class="vm-ci-kpi-label">Campanhas</div>
            <div class="vm-ci-kpi-value">{{ number_format($counts['campaigns']) }}</div>
            <div class="vm-ci-kpi-note">{{ $counts['previous_campaigns'] }} envio(s) anterior(es)</div>
        </article>
        <article class="vm-ci-kpi" data-tone="leaf">
            <div class="vm-ci-kpi-label">Enviados</div>
            <div class="vm-ci-kpi-value">{{ number_format($counts['sent']) }}</div>
            <div class="vm-ci-kpi-note">{{ number_format($counts['delivered']) }} entregues</div>
        </article>
        <article class="vm-ci-kpi" data-tone="lime">
            <div class="vm-ci-kpi-label">Aberturas</div>
            <div class="vm-ci-kpi-value">{{ number_format($counts['opened']) }}</div>
            <div class="vm-ci-kpi-note">{{ number_format($counts['open_events']) }} evento(s) detectado(s)</div>
        </article>
        <article class="vm-ci-kpi" data-tone="gold">
            <div class="vm-ci-kpi-label">Cliques</div>
            <div class="vm-ci-kpi-value">{{ number_format($counts['clicked']) }}</div>
            <div class="vm-ci-kpi-note">{{ number_format($counts['click_events']) }} evento(s) capturado(s)</div>
        </article>
        <article class="vm-ci-kpi">
            <div class="vm-ci-kpi-label">Ocorrências</div>
            <div class="vm-ci-kpi-value">{{ number_format($counts['bounced'] + $counts['failed']) }}</div>
            <div class="vm-ci-kpi-note">{{ $counts['bounced'] }} bounce(s) · {{ $counts['failed'] }} falha(s)</div>
        </article>
    </section>

    <div class="vm-ci-layout">
        <section class="vm-ci-panel" aria-labelledby="vm-ci-rates-title">
            <div class="vm-ci-panel-heading">
                <div>
                    <h3 class="vm-ci-panel-title" id="vm-ci-rates-title">Performance histórica</h3>
                    <p class="vm-ci-panel-copy">Métricas únicas por campanha, calculadas apenas sobre os envios deste endereço.</p>
                </div>
                <span class="vm-ci-count-chip">{{ $counts['sent'] }} envio(s)</span>
            </div>

            <div class="vm-ci-rates">
                @foreach ([
                    ['label' => 'Taxa de entrega', 'value' => $rates['delivery']],
                    ['label' => 'Taxa de abertura', 'value' => $rates['open']],
                    ['label' => 'Taxa de clique', 'value' => $rates['click']],
                    ['label' => 'Cliques por abertura', 'value' => $rates['click_to_open']],
                    ['label' => 'Taxa de bounce', 'value' => $rates['bounce']],
                ] as $rate)
                    <div class="vm-ci-rate">
                        <div class="vm-ci-rate-top">
                            <span>{{ $rate['label'] }}</span>
                            <strong>{{ $formatRate($rate['value']) }}</strong>
                        </div>
                        <div
                            class="vm-ci-rate-track"
                            style="--vm-rate: {{ max(0, min(100, (float) ($rate['value'] ?? 0))) }}%"
                            @if ($rate['value'] !== null)
                                role="progressbar"
                                aria-label="{{ $rate['label'] }}"
                                aria-valuemin="0"
                                aria-valuemax="100"
                                aria-valuenow="{{ (float) $rate['value'] }}"
                            @else
                                aria-label="{{ $rate['label'] }} sem dados"
                            @endif
                        ></div>
                    </div>
                @endforeach
            </div>

            <div class="vm-ci-tracking-note">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <circle cx="12" cy="12" r="9"></circle>
                    <path d="M12 10v6m0-9.1v.1"></path>
                </svg>
                <span>Aberturas são sinais detectados pelo provedor. Apple Mail e outros proxies de privacidade podem registrar uma abertura sem leitura humana.</span>
            </div>
        </section>

        <section class="vm-ci-panel" aria-labelledby="vm-ci-health-title">
            <div class="vm-ci-panel-heading">
                <div>
                    <h3 class="vm-ci-panel-title" id="vm-ci-health-title">Saúde e permissão</h3>
                    <p class="vm-ci-panel-copy">Situação atual do cadastro e da entregabilidade.</p>
                </div>
            </div>

            <div class="vm-ci-health-grid">
                <div class="vm-ci-health-item">
                    <span class="vm-ci-health-label">Validação técnica</span>
                    <span class="vm-ci-health-value">{{ $deliverability['validation'] }}</span>
                </div>
                <div class="vm-ci-health-item">
                    <span class="vm-ci-health-label">Caixa postal</span>
                    <span class="vm-ci-health-value" data-alert="{{ in_array($deliverability['mailbox_code'], ['risky', 'undeliverable'], true) ? 'true' : 'false' }}">
                        {{ $deliverability['mailbox'] }}
                    </span>
                </div>
                <div class="vm-ci-health-item">
                    <span class="vm-ci-health-label">Consentimento</span>
                    <span class="vm-ci-health-value" data-alert="{{ $deliverability['consent_code'] === 'withdrawn' ? 'true' : 'false' }}">
                        {{ $deliverability['consent'] }}
                    </span>
                </div>
                <div class="vm-ci-health-item">
                    <span class="vm-ci-health-label">Supressão</span>
                    <span
                        class="vm-ci-health-value"
                        data-alert="{{ $identity['state'] === 'removed' || $deliverability['is_suppressed'] ? 'true' : 'false' }}"
                    >
                        @if ($identity['state'] === 'removed')
                            Cadastro removido
                        @elseif ($identity['state'] === 'snapshot')
                            Sem cadastro atual
                        @else
                            {{ $deliverability['is_suppressed'] ? ($deliverability['suppression_reason'] ?: 'Ativa') : 'Liberado' }}
                        @endif
                    </span>
                </div>
                @if ($deliverability['consent_source'])
                    <div class="vm-ci-health-item">
                        <span class="vm-ci-health-label">Origem do consentimento</span>
                        <span class="vm-ci-health-value">{{ $deliverability['consent_source'] }}</span>
                    </div>
                @endif
            </div>

            @if ($identity['state'] !== 'snapshot')
                <div class="vm-ci-risk-line" aria-label="Ocorrências de risco acumuladas">
                    <div class="vm-ci-risk"><strong>{{ $deliverability['soft_bounces'] }}</strong><span>Soft bounce</span></div>
                    <div class="vm-ci-risk"><strong>{{ $deliverability['hard_bounces'] }}</strong><span>Hard bounce</span></div>
                    <div class="vm-ci-risk"><strong>{{ $deliverability['spam_complaints'] }}</strong><span>Spam</span></div>
                    <div class="vm-ci-risk"><strong>{{ $deliverability['unsubscribes'] }}</strong><span>Descadastro</span></div>
                </div>
            @else
                <div class="vm-ci-empty" style="margin-top: .7rem">
                    Os contadores atuais de risco não estão disponíveis para este endereço histórico.
                </div>
            @endif
        </section>
    </div>

    <section class="vm-ci-panel" aria-labelledby="vm-ci-lists-title">
        <div class="vm-ci-panel-heading">
            <div>
                <h3 class="vm-ci-panel-title" id="vm-ci-lists-title">Listas atuais</h3>
                <p class="vm-ci-panel-copy">
                    {{ $identity['state'] === 'removed'
                        ? 'Vínculos de lista preservados no cadastro removido.'
                        : 'Públicos dos quais este contato participa neste momento.' }}
                </p>
            </div>
            <span class="vm-ci-count-chip">{{ $lists->count() }} lista(s)</span>
        </div>

        @if ($lists->isNotEmpty())
            <div class="vm-ci-list-tags">
                @foreach ($lists as $list)
                    <span class="vm-ci-tag">{{ $list['name'] }}</span>
                @endforeach
            </div>
        @else
            <div class="vm-ci-empty">
                {{ $identity['state'] === 'removed'
                    ? 'O contato foi removido do cadastro; as campanhas abaixo preservam o histórico das listas utilizadas.'
                    : 'Este contato não participa de nenhuma lista ativa no momento.' }}
            </div>
        @endif
    </section>

    <section class="vm-ci-panel" aria-labelledby="vm-ci-history-title">
        <div class="vm-ci-panel-heading">
            <div>
                <h3 class="vm-ci-panel-title" id="vm-ci-history-title">Histórico de campanhas</h3>
                <p class="vm-ci-panel-copy">
                    @if ($counts['previous_campaigns'] > 0)
                        Este endereço recebeu {{ $counts['previous_campaigns'] }} campanha(s) anterior(es).
                    @else
                        Nenhuma campanha anterior foi encontrada para este endereço.
                    @endif
                    @if ($counts['history_total'] > $counts['history_shown'])
                        Exibindo os {{ $counts['history_shown'] }} registros mais recentes, incluindo a campanha selecionada.
                    @endif
                </p>
            </div>
            <span class="vm-ci-count-chip">
                {{ $counts['history_shown'] }} de {{ $counts['history_total'] }} registro(s)
            </span>
        </div>

        @if ($history->isNotEmpty())
            <ol class="vm-ci-history">
                @foreach ($history as $item)
                    <li class="vm-ci-history-item" data-current="{{ $item['is_current'] ? 'true' : 'false' }}">
                        <span class="vm-ci-timeline-mark" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <path d="M3.8 6.5 12 12l8.2-5.5M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"></path>
                            </svg>
                        </span>
                        <div class="vm-ci-history-main">
                            <div class="vm-ci-history-top">
                                <div>
                                    <div class="vm-ci-history-name">
                                        {{ $item['campaign_name'] }}
                                        @if ($item['is_current'])
                                            <span class="vm-ci-current-label">· selecionada</span>
                                        @endif
                                    </div>
                                    @if ($item['campaign_subject'])
                                        <div class="vm-ci-history-subject">{{ $item['campaign_subject'] }}</div>
                                    @endif
                                </div>
                                <span class="vm-ci-status" data-status="{{ $item['recipient_status'] }}">
                                    {{ $item['recipient_status_label'] }}
                                </span>
                            </div>

                            <div class="vm-ci-history-meta">
                                <span>Campanha: <strong>{{ $item['campaign_status_label'] }}</strong></span>
                                <span>Lista: <strong>{{ $item['list_name'] ?: 'não vinculada' }}</strong></span>
                                <span>Enviado: <strong>{{ $formatDate($item['sent_at']) }}</strong></span>
                                @if ($item['delivered_at'])
                                    <span>Entregue: <strong>{{ $formatDate($item['delivered_at']) }}</strong></span>
                                @endif
                                @if ($item['opened_at'])
                                    <span>Primeira abertura: <strong>{{ $formatDate($item['opened_at']) }}</strong></span>
                                @endif
                                @if ($item['clicked_at'])
                                    <span>Primeiro clique: <strong>{{ $formatDate($item['clicked_at']) }}</strong></span>
                                @endif
                                @if ($item['bounced_at'])
                                    <span>Bounce: <strong>{{ $formatDate($item['bounced_at']) }}</strong></span>
                                @endif
                                @if ($item['unsubscribed_at'])
                                    <span>Descadastro: <strong>{{ $formatDate($item['unsubscribed_at']) }}</strong></span>
                                @endif
                            </div>

                            @if ($item['last_error'])
                                <div class="vm-ci-error">{{ $item['last_error'] }}</div>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ol>
        @else
            <div class="vm-ci-empty">Nenhum envio foi encontrado para este endereço.</div>
        @endif
    </section>
</div>