@if (picker.isPicking()) {
  <div class="pointer-events-none fixed inset-x-0 bottom-4 z-[95] flex justify-center px-4">
    <div class="pointer-events-auto max-w-xl rounded-lg border border-border bg-card px-4 py-3 shadow-lg backdrop-blur">
      <div class="flex flex-wrap items-center gap-3">
        <div class="min-w-0 flex-1">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-primary">Theme Picker Active</p>
          <p class="mt-1 text-sm text-foreground">Click a highlighted area to inspect its theme key.</p>
          <p class="mt-1 text-xs text-muted-foreground">
            Hovering:
            <span class="font-medium text-foreground">{{ hoveredEntry()?.label || 'Move over a themeable region' }}</span>
            @if (hoveredEntry()) {
              <span class="ml-1 rounded-md bg-secondary px-2 py-0.5 font-mono text-[11px] text-foreground/80">
                {{ hoveredEntry()!.key }}
              </span>
            }
          </p>
        </div>

        <button
          type="button"
          (click)="cancel()"
          class="inline-flex items-center rounded-md border border-border bg-secondary px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-secondary/80"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
}