{{-- Merge-tag chips (CRM-4). Rendered inside the canvas Alpine scope from the
     config catalogue (variables). Clicking a chip inserts its token at the caret
     of the sibling [data-var-input] field via insertToken(). Wrap the field +
     this partial in a .rf-var-field so insertToken can find the right input. --}}
<div class="rf-var-chips" style="display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;">
    <template x-for="v in variables" :key="v.token">
        <button type="button"
                @click="insertToken($event.currentTarget, v.token)"
                x-bind:title="v.label + ' — ' + v.example"
                style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1;padding:4px 7px;border:1px solid var(--color-border);border-radius:7px;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;"
                x-text="v.token"></button>
    </template>
</div>